技術標籤：前端小程式web-view本地除錯web-view

背景

小程式中嵌入 web-view 除錯時需要釋出到線上環境才能看到效果，不方便也不滿足除錯需要頻繁修改程式碼的需求，若能在本地直接進行程式碼除錯，則可大大減少除錯程式碼時間。

思路

小程式中 web-view 只能訪問配置好的合法域名，所以修改本地 hosts 使配置好的合法域名對映到本地的ip 地址，本地訪問該域名時會優先使用本地對映。

步驟

1.專案配置本地https訪問

因為小程式中 web-view 只能使用 https 連結， 所以本地專案需配置 https 訪問，這裡已 vue 為例

vue-cli3.x 專案

在專案根目錄下的vue.config.js檔案中增加屬性 https: true 即可

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'url',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // 此處開啟 https
    https: true
  }
}

vue.config.js 配置參考文件：

vue-cli2.x 專案

使用cli2.x搭建的專案開啟https較為複雜，關鍵是openssl生成證書檔案，如果本地沒有證書，要先生成證書，以及修改專案中配置。

1. 生成本地證書

若本地已經安裝了git客戶端，其中包括了openssl程式，可直接在專案檔案目錄開啟git bash 介面，輸入以下命令

① 在build資料夾下新建 cert 資料夾，在cert目錄下開啟git bash輸入以下命令生成私鑰 .key 檔案

openssl genrsa -out private.key 1024

② 通過上面生成的私鑰檔案生成CSR 證書籤名，根據要求填寫一些相關資訊，可一路按回車即可

openssl req -new -key private.key -out csr.key

③ 根據上述私鑰檔案和csr證書籤名檔案生成證書檔案

openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt

完成上述步驟後，cert目錄下分別生成 private.key、csr.key、file.crt 三個檔案。

2. 修改專案中配置

開啟app.js增加以下程式碼：（若相關配置寫在./build/dev-server.js中則在對應檔案中修改

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.修改本地hosts檔案（win）

hosts 檔案路徑： C:\Windows\System32\drivers\etc\hosts

在 hosts 檔案新增以下配置

127.0.0.1          m.xxx.com

這裡需要注意的是，代理的域名不能和請求介面的域名一致，一致的話介面就無法請求，舉個栗子，我在測試環境請求介面的域名是 sandbox-m.xxx.con，所以我這裡使用了正式環境的域名 m.xxx.com 作為代理

最後

訪問 https://m.xxx.cn:port 訪問成功即可在小程式的 web-view 中使用這個地址來調式本地執行的程式碼

參考文章
vue專案本地開啟https訪問模式：https://blog.csdn.net/l508742729/article/details/107820099