vue 配置

Posted 2023-04-11

参考技术A

node_modules 依赖包

public 静态资源托管

src 源码

.eslintrc.js 语法规则配置

.gitignore 源码托管过滤文件

babel.config.js 高级语法配置

package.json 项目配置文件

傻瓜式

手动配置

github

gitee

gitlab

在可视化的ui面板中，通过 控制台 和 分析 面板， 可以方便的查看存在的问题

https://cli.vuejs.org/zh/config

configureWebpack 通过对象形式操作

chainWebpack 通过链式形式操作

在vue.config.js中配置devServer的proxy属性

在vue.config.js中配置devServer的before属性

vue3中vite的配置

参考技术A 上一节 - 搭建vue3+typescript+vite+yarn项目

在vue2里，我们使用webpack打包工具，一些基本配置我们都是熟悉不能再熟悉，但在vite里，有什么不同呢？

参考链接 - vite 中文文档

vue2里，针对webpack的配置，是基于vue.config.js文件
但在基于vite的vue3里，配置文件是vite.config.js
我构建的是ts版本的vue3项目，那么我的配置文件就是vite.config.ts
而且该文件项目创建的时候已经默认生成了
新创建的项目配置文件，仅仅配置vue的支持，如下：

配置反向代理，利用 server配置项

配置项一目了然，跟vue2的vue.config.js的配置大同小异
这里主要说明下，我proxy里的config

config变量来源于全局变量

这需要在根目录下创建两个命名为：.env.development、.env.production的文件
编写相关的变量：

vue2中使用习惯了开箱即用的路径别名，但在vue3的ts项目里，如果直接使用，是会报错的：

这样配置后，引入组件就能正常被编译了

下一节 - vue3中引入router和vuex