問題描述

在使用最新版本的uniapp打包h5程式時，會出現程式打包完成，但在瀏覽器中無法存取任何頁面的情況。經過排查後發現，打包後的程式資料夾中缺少所需的頁面檔案。

問題原因

經過調查，發現最新版本的uniapp在打包時會出現一個bug，導致打包完成後沒有將頁面檔案打入套件內。這個bug通常出現在使用最新版的vue-router時。

解決方案

目前來看，uniapp官方還沒有提供修復此問題的方法，但我們可以透過以下方法解決此問題：

1. 降低vue- router版本

由於此問題通常出現在vue-router最新版本中，我們可以將其降級到較早的版本。具體操作步驟如下：

執行下列指令進行vue-router的降級：npm install vue-router@x.x.x（x.x.x為對應版本號，建議選擇3.0.7版本)
在專案的main.js檔案中，將vue-router的引用語句修改為：import VueRouter from 'vue-router/dist /vue-router.common.js'

2. 自訂webpack設定

如果降級vue-router仍未解決問題，我們可以嘗試透過自訂webpack配置來修復。

在專案根目錄下，建立一個vue.config.js文件，並輸入以下程式碼：

const path = require('path');

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.resolve(__dirname, './src/pages'),
                    to: path.resolve(__dirname, './dist/pages')
                }
            ])
        ]
    }
}

登入後複製

以上程式碼中，我們透過CopyWebpackPlugin外掛程式將項目的src/pages目錄下的所有檔案拷貝至dist/pages目錄下，確保打包完成後頁面資料夾中包含所有必備檔案。