vuecli3.0

3.0以后，大多数配置，都通过函数封装了，增加的规范性，刚开始，从2.*转过来的，表示很难受

1. 如何查看webpack配置

vue inspect > output.js复制代码

2. 如何修改webpack配置

创建vue.config.js
```
module.exports = {}复制代码
```

配置代理

devServer: {  open: process.platform === 'darwin',  host: '0.0.0.0',  port: 8080,  https: false,  hotOnly: false,  proxy: {    '/activity': {      target: 'https://example.ipay.so/marketing',      ws: true,      changeOrigin: true    },  }, // string | Object  before: app => {    // `app` 是一个 express 实例  }},复制代码

修改基础配置(静态资源公共路径)

configureWebpack:(config)=>{ config.output.publicPath=env.publicPath[process.env.VUE_APP_build] , config.entry.app='./src/main.ts' }复制代码

全局变量声明

在根目录下新建.env文件（有三种模式，.env会在所有模式中使用），在文件中以键值对的形式声明变量，例如VUE_APP_build=test。以VUE_APP_开头的变量，不仅可以在webpack配置中使用，还会通过DefinePlugin在项目中使用

代码压缩去sourceMap

找到 node_modules@vue\cli-service\lib\options.js中的productionSourceMap改为false

uglifyOptions配置

这个插件的配置没有暴露出来，因此需要自己找到这个文件node_modules@vue\cli-service\lib\config\uglifyOptions.js 一般会在compress下添加一个字段drop_console: true，用来关闭console

configureWebpack (config) {    // 生产环境去掉console, 注意console里面不要放函数调用, 也会被删掉    if (process.env.NODE_ENV === 'production') {      const terserWebpackPlugin = config.optimization.minimizer[0]      const terserOptions = terserWebpackPlugin.options.terserOptions      terserOptions.compress["drop_console"] = true    }  }复制代码

typescript踩的坑

主要是模块和变量都要在根路径下面用一个.d.ts文件声明，要不然ts检查会报错如果不方便，也可以用断言(< any >window)这种形式。接口文件最好独立出来，然后在tsconfig.json的typeRoots下添加接口文件地址。只要接口写得好，TS的代码提示用起来很爽。例如你需要在main.ts中引process.env的环境变量，如果不做任何处理，编译后的js可以正常执行，但是ts会报错process未定义。

这个时候，可以在根路径下面定义一个命名空间，并写入合适变量类型(这只是完善提示，并不代表全局存在这个变量)

declare namespace process {  var env:{a:string,b:number,c:object}}复制代码

定义好了，ajax的后端接口结构，然后在.vue里面赋值，推断全被冲掉了。