项目配置"/>
vue前端项目配置
目录
背景：
0.参考文档
0.1介绍 | Vue CLI (vuejs)（官方文档）
0.2【vue-cli5 bug】npm run build自动编译两次??? - 掘金 (juejin)
0.3vendor.js文本过大
0.4vue性能优化
0.5启动项目一直是生产环境
0.6process.env（推荐阅读）
0.7module.exports和export详解 - 简书 (jianshu)
1.变量和用法解释
1.1process.env
1.2public Path
1.3moudle.export
1.4resolve函数
2..env环境配置
3.vue.config.js文件
4..browserslistrc配置文件
5.发现的问题
背景：
最近发现项目开发过程太耗时间了，而且打包会发生两次，于是乎就去查看所有配置文件，尝试解决一些问题。
0.参考文档
0.1介绍 | Vue CLI (vuejs)（官方文档）
0.2【vue-cli5 bug】npm run build自动编译两次??? - 掘金 (juejin)
0.3vendor.js文本过大
0.4vue性能优化
0.5启动项目一直是生产环境
0.6process.env（推荐阅读）
0.7module.exports和export详解 - 简书 (jianshu)
1.变量和用法解释
1.1process.env
官方解释为node.js里面的一个环境变量，你打印出来可以发现很多的key-value形式的环境变量在里面，还包含部分全局环境变量
1.2public Path
这个是制定部署路径，根据mode可以进行三元赋值（有条件控制赋值）
通常为`/`或 `./`
1.3moudle.export
这个函数就将当前配置文件的部分变量和方法进行暴露，然后给其他模块使用require进行调用
1.4resolve函数
解释对应模块下面的变量或方法以供使用
2..env环境配置
PS:此部分内容可以在vue cli的当里面可以找到
一般会将运行需要的环境写入该文件当中，约定俗成有三种文件
其中每个文件最基础包含一个NODE_ENV变量和一个请求接口的变量
其他变量你可以自定义，但他们都会进入process.env里面，所以你可以通过对该变量进行暴力匹配，获取到数据写入你自己的某些文件里面，实现共享存储通信或者配置文件与运行解耦！
一般而言分为development和production以及test，分别对应开发运行环境，部署测试环境，备用测试环境
而process.env.NODE_ENV默认和model保持一致
3.vue.config.js文件
每次运行`npm run serve`都会重新构建项目运行main.ts和vue.config.js，刷新也是
一般是用来做一些前置操作
4..browserslistrc配置文件
.browserslistrc 是在不同的前端工具之间共用目标浏览器和node版本的配置文件。
好吧，这个我没用过，暂时放这里
5.发现的问题
（1）项目总是全局导入，打的vender包很大
（2）有Utility-First CSS写法进入class当中，造成初次渲染样式坍塌（实际是样式未生效）
更多推荐
vue前端项目配置
发布评论