vue-cli3.0的使用踩坑记录

又有一段时间没写过博客了。

上家公司做了一个多月，没学到什么东西。跳槽了之后，因为自研项目原本是做的多页vue项目，每次都要单独引进，所以从锻炼经验以及完成任务的角度开始了重构。

之前用的是vue-cli2.x的版本，现在使用vue-cli3.0进行搭建。

项目结构安装什么的都不想说，只记录有问题的部分。

1.vue.config.js

3.0没有了相关的config.js，所以需要自己在根目录下面新建一个配置文件进行操作。

1）baseUrl

   这个还是老问题，2.x的时候就遇到过打包之后的版本加载资源的路径不对，和原来在dev的配置文件下一样，如下设置

   baseUrl: './',

2）跨域

   跨域也是和原来一样，只不过换了写的地方

devServer: {

proxy: {

'/v2': {

target: 'http://localhost:8888/',

changeOrigin: true,

pathRewrite: {

'^/v2': ''

                    }

               }

         }

}

2.区分生产环境和测试环境和本地环境的问题。

1）本地环境

    前端们本地开发一般会遇到请求后端接口跨域的问题，我们公司后端写法有问题，没做统一接口名称管理，所以自己在前端加了个类似v2的前缀进行接口判断，然后使用vue的server处理跨域。

    那么本地环境就要将地址改为xxxx:xx/v2的形式，所以在根目录下新建.env.local的配置文件，

内部内容为，此处脚手架文档都有介绍。

    NODE_ENV='local'
    VUE_APP_URL='v2'

在编译的时候只要把serve改为"serve": "vue-cli-service serve --mode local",即可

2）生产环境和测试环境

   我们公司的区别也就在于地址不同，也是只做了url的切换。"prod": "vue-cli-service build --mode production",

 内部内容一般来说要为了区分可以加上

  outputDir = 'prod'或者outputDir = 'devtest'

然后再config.js中将打包输出目录更改

outputDir:process.env.outputDir就可以了。

3.element-ui的引入的问题等

这块引入和原来的Import不太一样，拆出来了plugins文件夹放工具js。

4.使用ts遇到的问题

使用ts的时候发现，目前大多数的插件例如swiper等等还没有支持ts,（缺少ts的配置文件？），我在使用过程中发现很多都Import使用不了，目前没有找到好的解决办法，然后就退到了js的版本。

还有一些问题下次再更新。