2、vue項目打包及靜態文件報錯解決

vue項目打包及靜態文件報錯解決

Failed to load resource: net::ERR_FILE_NOT_FOUND或者build之後dist文件下的index.html不顯示內容

通過vue-cli創建的項目

npm run dev 運行開發環境可以看到效果，

但是 npm run bulid 之後，生成的dist文件下的index.html直接打開不顯示內容，看不到效果，報錯如下：

vue-cli@2 解決方案：

在 webpack.prod.conf.js 中的 output 添加參數publicPath:’./’

具體代碼：

在 webpack.prod.conf.js 裏

output: {
    publicPath: process.env.NODE_ENV === 'production'
      ? './' +config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath,
      // 上面是添加代碼
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

這時候再打包，打開 dist 下的 index.html 就顯示內容了

vue-cli@3 解決方案：

1. 在項目根目錄新建文件 vue.config.js 並寫如下代碼：

   // vue.config.js
   module.exports = {
     publicPath: './'
   }
   

   2、然後，關鍵的一步，在 src/router.js 中刪去 mode: 'history'

   // ...
   export default new Router({
     // mode: 'history',  // 有這句的刪掉，沒有就不用管
     base: process.env.BASE_URL,
     routes: [
       {
         path: '/',
         name: 'home',
         component: Home
       }
     ]
   })