vuecli3.0和ts踩坑

1,872

vuecli3.0

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

1. 如何查看webpack配置

    vue inspect > output.js

2. 如何修改webpack配置

  1. 创建vue.config.js
    module.exports = {}
    
  2. 配置代理
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 实例
  }
},
  1. 修改基础配置(静态资源公共路径)
    configureWebpack:(config)=>{
     config.output.publicPath=env.publicPath[process.env.VUE_APP_build] ,
     config.entry.app='./src/main.ts' }
    
  2. 全局变量声明

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

  1. 代码压缩去sourceMap

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

  1. 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里面赋值,推断全被冲掉了。