Local debugging applet embedded web-view


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.


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.

  1. 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.

  1. 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          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

Guess you like

Origin blog.csdn.net/Gage__/article/details/113744884