文件压缩如何去掉console

在使用vue开发项目的过程中，免不了在调试的时候会写许多console，在控制台进行调试；在开发的时候这种输出是必须的，但是build后线上运行时这个东西是不能出现的；那么我如何配置项目，从而让webpack帮我删除掉console呢？下面我们给出了vue-cli 3.0和vue-cli 2.0的配置如下：

vue-cli 3.0

在 vue.config.js文件中添加如下代码即可

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = {...configureWebpack: {optimization: {minimizer: [new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_console: true,//consoledrop_debugger: false,pure_funcs: ['console.log']//移除console}}})]}}...
}

vue-cli 2.0

在build/webpack.prod.conf.js文件中进行如下配置即可

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins: [...// http://vuejs.github.io/vue-loader/en/workflow/production.htmlnew webpack.DefinePlugin({'process.env': env}),new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_console: true,//consolepure_funcs: ['console.log']//移除console}},sourceMap: config.build.productionSourceMap,parallel: true}),...
]

axios解决调用后端接口跨域问题

vue-cli 3.0

在项目根目录新建vue.config.js文件，增加如下配置即可：

module.exports = {lintOnSave: false, // 是否使用eslintpublicPath: '/',// 这里开始代理配置devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}}
}

vue-cli 2.0

vue-cli是通过本地代理的方式解决接口跨域问题的。但是在vue-cli 2.0的默认项目配置中这个代理是没有配置的，如果现在项目中使用，必须手动配置config/index.js文件。

...
proxyTable: {'/api': {    //将www.exaple.com印射为/apistarget: 'https://www.example.com,  // 接口域名secure: true,  // 如果是https接口，需要配置这个参数changeOrigin: true,  //是否跨域pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径'^/api': '/' }}
}
...