background
The web-view embedded in the applet needs to be released to the online environment to see the effect when debugging, which is inconvenient and does not meet the needs of frequent code modification for debugging. If the code debugging can be performed locally, the debugging time can be greatly reduced.
train of thought
In the applet, web-view can only access the configured legal domain name, so modify the local hosts so that the configured legal domain name is mapped to the local ip address, and the local mapping will be used first when accessing the domain name locally.
step
1. Project configuration local https access
Because the web-view in the applet can only use https links, so local projects need to configure https access, here is vue as an example
vue-cli3.x project
Add the attribute https: true to the vue.config.js file in the project root directory
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'url',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// 此处开启 https
https: true
}
}
vue.config.js configuration reference document: https://cli.vuejs.org/zh/config/#vue-config-js
vue-cli2.x project
It is more complicated to open https for projects built using cli2.x. The key is to generate a certificate file with openssl. If there is no certificate locally, you must first generate a certificate and modify the configuration in the project.
- Generate a local certificate
If the git client has been installed locally, including the openssl program, you can directly open the git bash interface in the project file directory and enter the following command
① Create a new cert folder under the build folder, open git bash in the cert directory and enter the following command to generate a private key.key file
openssl genrsa -out private.key 1024
② Generate a CSR certificate signature through the private key file generated above, fill in some relevant information as required, and press Enter all the way
openssl req -new -key private.key -out csr.key
③ Generate a certificate file based on the above private key file and csr certificate signature file
openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt
After completing the above steps, three files private.key, csr.key and file.crt will be generated in the cert directory.
- Modify the configuration in the project
Open app.js and add the following code: (If the relevant configuration is written in ./build/dev-server.js, modify it in the corresponding file
const opn = require('opn')
const path = require('path')
const express = require('express')
const app = express()
// ......
const https = require('https')
const fs = require('fs')
const privateKey = fs.readFileSync(path.join(__dirname, '../build/cert/private.key'), 'utf8')
const certificate = fs.readFileSync(path.join(__dirname, '../build/cert/file.crt'), 'utf8')
let credentials = {
key: privateKey, cert: certificate}
// 开启 https服务
let server = https.createServer(credentials, app)
// ...
// app.listen(port) // 开启http
server.listen(port) // 开启https
2. Modify the local hosts file (win)
hosts file path: C:\Windows\System32\drivers\etc\hosts
Add the following configuration to the hosts file
127.0.0.1 m.xxx.com
It should be noted here that the domain name of the proxy cannot be the same as the domain name of the request interface. If it is the same, the interface cannot be requested. For example, the domain name of the request interface in my test environment is sandbox-m.xxx.con, so I used it here The domain name m.xxx.com of the formal environment acts as a proxy
at last
Visit https://m.xxx.cn:port and you can use this address in the web-view of the applet to debug the code running locally if the access is successful
Refer to the article
Vue project to enable https access mode locally: https://blog.csdn.net/l508742729/article/details/107820099