文件壓縮如何去掉console

在使用vue開發(fā)項目的過程中，免不了在調(diào)試的時候會寫許多console，在控制臺進(jìn)行調(diào)試；在開發(fā)的時候這種輸出是必須的，但是build后線上運行時這個東西是不能出現(xiàn)的；那么我如何配置項目，從而讓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文件中進(jìn)行如下配置即可

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解決調(diào)用后端接口跨域問題

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的默認(rèn)項目配置中這個代理是沒有配置的，如果現(xiàn)在項目中使用，必須手動配置config/index.js文件。

... proxyTable: {'/api': { //將www.exaple.com印射為/apistarget: 'https://www.example.com, // 接口域名secure: true, // 如果是https接口，需要配置這個參數(shù)changeOrigin: true, //是否跨域pathRewrite: { // 如果接口本身沒有api的路徑，那么這里將發(fā)送到后端的請求重寫為沒有api的路徑'^/api': '/' }} } ...

轉(zhuǎn)載于:https://www.cnblogs.com/huyifei/p/10445773.html

總結(jié)

以上是生活随笔為你收集整理的vue项目的实用配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。