Vue打包会遇见各种各样的问题,总结如下,
1.打包后页面为空白,没有报错信息
一般是Router中的mode被设置成了history模式,如
export default new Router({
linkActiveClass: 'active',
// mode: 'history', //加入这一句即可去掉路径中的#
routes: []
因为VUE根据#确认根路径,然后获取静态资源,所以history导致其无法获取静态资源
2.打包后有页面,只是加载不到部分问题,
如果已经将 mode: 'history',去掉,路径中有#但是部分静态资源获取不到
注意开发情况下不要修改
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
请查看
assetsPublicPath: './',
的值是不是正确,一般都是assetsPublicPath: '/',导致的
也有可能是util.js中配置有问题,核对如下配置,然后一般都可以打包成功
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
去除log和开发模式,,在打包配置文件中修改UglifyJsPlugin
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
//drop_console 传递true以放弃对控制台的调用。*功能
drop_console: true,
// pure_funces 禁用console.log函数
pure_funcs: ['console.log']
}
},
并加密打包
把config/index.js 里面的productSourceMap改为false即可
加载不到ico
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
其他的文件慎重改动,除非你很熟悉他,
如我做出如下修改
//修改为只有development 用dev 其他打包用
const assetsSubDirectory = process.env.NODE_ENV === 'development'
? config.dev.assetsSubDirectory
: config.build.assetsSubDirectory