vue本地打包build之后dist文件下的index.html不显示内容报错Failed to load resource

【vue-cli踩坑】Failed to load resource: net::ERR_FILE_NOT_FOUND或者build之后dist文件下的index.html不显示内容

这里会介绍 vue-cil@2 和 vue-cil@3 两种方式创建项目的解决方案

场景

通过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
       }
     ]
   })

   现在再打包就可以了