vue-cli3.0的使用踩坑记录
又有一段时间没写过博客了。上家公司做了一个多月,没学到什么东西。跳槽了之后,因为自研项目原本是做的多页vue项目,每次都要单独引进,所以从锻炼经验以及完成任务的角度开始了重构。之前用的是vue-cli2.x的版本,现在使用vue-cli3.0进行搭建。项目结构安装什么的都不想说,只记录有问题的部分。1.vue.config.js3.0没有了相关的config.js,所以需要自己...
又有一段时间没写过博客了。
上家公司做了一个多月,没学到什么东西。跳槽了之后,因为自研项目原本是做的多页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的版本。
还有一些问题下次再更新。
更多推荐
所有评论(0)