vue打包不生成html,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 解决方案：

在项目根目录新建文件 vue.config.js 并写如下代码：

// vue.config.js

module.exports = {

publicPath: './'

}

然后，关键的一步，在 src/router.js 中删去 mode: 'history'

// ...

export default new Router({

// mode: 'history', // 有这句的删掉，没有就不用管

base: process.env.BASE_URL,

routes: [

{

path: '/',

name: 'home',

component: Home

}

]

})

现在再打包就可以了