Vue打包问题

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