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': '/'
    }
  }
}
...