關于vue/cli3打包空白頁問題解決

前提

在vue-cli2中也出現過打包後本地打開index.html空白頁問題，解決辦法：修改config檔案夾中ndex.js檔案中assetsPublicPath屬性為assetsPublicPath: ‘./’，路由用hash模式

環境

• vue-cli3
• package.json檔案如下：

{
  "name": "my-temp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}
           

vue-cli3解決辦法

• 建立vue.config.js檔案，添加配置項：publicPath: ‘./’

module.exports = {
    publicPath: './',
}
           

vue.config.js目錄位置

• 路由用hash模式

  

效果

官網對publicPath屬性說明：

部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一緻，但是 Vue CLI 在一些其他地方也需要用到這個值，是以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

預設情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設定 publicPath 為 /my-app/。

這個值也可以被設定為空字元串 (’’) 或是相對路徑 (’./’)，這樣所有的資源都會被連結為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的檔案系統中。

官網連結位址：publicPath描述