vue項目的實用配置

文件壓縮如何去掉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,//console
                            drop_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.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_console: true,//console
          pure_funcs: ['console.log']//移除console
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    ...
]

axios解決調用后端接口跨域問題

vue-cli 3.0

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

module.exports = {
    lintOnSave: false, // 是否使用eslint
    publicPath: '/',
    // 這里開始代理配置
    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印射為/apis
    target: 'https://www.example.com,  // 接口域名
    secure: true,  // 如果是https接口，需要配置這個參數
    changeOrigin: true,  //是否跨域
    pathRewrite: { // 如果接口本身沒有api的路徑，那么這里將發送到后端的請求重寫為沒有api的路徑
      '^/api': '/' 
    }
  }
}
...