Vite构建vue3项目的注意事项

自己在用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