自己在用vite构建Vue3项目时遇到的一些问题,这在里分享下:
-
安装cross-env yarn add cross-env -D // 一定要安装在开发环境
-
安装sass yarn add sass -D // 安装在开发环境
-
vite读取配置文件是根据mode模式读取
- yarn dev:若执行的development环境,则会自动读取.env.development配置文件
- yarn build:若执行的production环境,则会自动读取.env.production配置文件
- 若想读取其他配置文件,如.env.prelease 则需要执行yarn prelease: ‘vite --mode prelease’ 去改变mode的值
-
.env[mode]配置文件:
- 环境变量和模式 | Vite 官方中文文档 (vitejs.dev)
- 必须以 VITE_ 开头,不然读取不到;例如:VITE_PATH
- 读取:一般可通过 import.meta.env.VITE_PATH 获取
-
vite的开发环境和生产环境中 base(打包公共路径)
- 开发环境,base: ‘./’
- 生产环境,base: ‘/’
-
vue.config.js配置
//import {loadEnv, defineConfig} from 'vite'
const path