vue打包遇到的问题

一、项目中使用了sass，以src形式引入，然而在进行打包时未成功，报错显示 unknown word

思路：这种可能是多种原因造成的，这里只给大家提供一种思路：可能是scss文件中使用了'//'这样的注释方法，导致'//'后面的代码都被注释掉，所以无法解析。

解决：

1.将webpack.prod.config.js中的以下代码注释

//const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
//new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap
//? { safe: true, map: { inline: false } }
// : { safe: true }
//}),

这几行代码是压缩css文件的功能，注释掉就不压缩，'//'后的代码可以正常显示。

2.将所有‘//’注释方法改为‘/**/’注释 

二、项目中使用了sass，以src形式引入，scss文件里图片使用本地相对路径，打包后放在线上时无法解析图片地址

解决：找到build/utils.js，在其中加入一行代码publicPath:'../../'，改变寻找图片的路径

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

三、webpack打包时如何去掉console.log

解决：增加一行代码：drop_console:true

/*webpack.prod.conf.js文件*/
new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      drop_debugger: true,
      drop_console: true
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})