1、修改config下面的index.js中bulid模块导出的路径
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
//修改此处路径
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
这一步做完后,执行 npm run build 后打开index.html ,你会发现页面已经出来了,但是有些图片,或者字体图标类的没有正常的显示出来,接下来看第二部
2.修改build文件夹下边的utils.js文件
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
//此处添加publicPath:'../../'
publicPath:'../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
修改完成后再次运行 npm run build ,打开index.html 这时页面已经完好的运行起来了
3.如果以上方法仍然没有解决你的问题
src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html
// mode: 'history' // 默认hash