一、根据vite官网教程创建项目
注意：vite3 需要node版本14.18+，如果用vite3创建项目报错的请注意查看node版本，并且升级
// npm 安装方式
npm create vite@latest
// pnpm 安装方式
pnpm create vite
根据提示输入项目名称，选择vue版本进行后续操作
// 进入项目目录 初始化项目依赖
pnpm i
// 启动项目 确保项目能正常启动
npm run dev
二、安装常用依赖
具体的需要用到什么看个人需求，下面是我常用的一些依赖整理（生产环境）
- pinia/vuex ----2选1 pinia对应的数据持久化插件 pinia-plugin-persistedstate
vuex对应的数据持久化插件 vuex-persistedstate - element-plus/antd ----2选1 后台ui组件库
- axios ----发送request的http库 vue全家桶之一
- vue-router@4 ---- vue全家桶之一 路由插件
- @vueuse/core ----一个vue工具集
- lodash-es ----js工具集 推荐用-es 用法和lodash一样，只不过是模块化
- dayjs ----处理日期的工具集
- vue-i18n ----国际化插件
- @icon-park/vue-next ----字节出的icon图标库，图标多一些，大小样式比较统一。替代品为阿里图标图
pnpm i pinia pinia-plugin-persistedstate element-plus axios @vueuse/core lodash-es vue-i18n vue-router@4 dayjs @icon-park/vue-next
css预处理编译（开发环境 ） -D 的意思是在只需要在开发环境，因为最后sass都会编译成正常的css
pnpm i sass -D
三、创建环境变量文件
在根目录创建名称为：作用是根据不同的环境，切换里面的变量
.env.development
.env.production
里面的内容
NODE_ENV = production
VITE_BASE_URL = http://juejin.cn/
VITE_UPLOAD_IMG = api/upload_img
VITE_WEB_PATH = /admin/
注意：vite的环境变量命名和webpack不一样 vite必须以 VITE_开头
// 用法：
import.meta.env.VITE_BASE_URL
四、配置vite文件（vite.config.js）
1. vite基础配置(注意和vite2不一样了)
sass变量、别名、代理
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path"
export default defineConfig({
plugins: [vue()],
// 如果用到sass的变量，就需要在这里配置
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "./src/css/variable.scss" as *;`,
},
},
},
resolve:{
alias:{
// 这里不需要__dirname，直接使用，因为vite3内置了这个变量，用vite2的方式会报错
"@": resolve("src"),
"views": resolve("src/views"),
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
},
// 这里是代理配置，如果后端设置了跨域，这里可以直接删掉
server:{
proxy:{
'/api':{
target:"http://127.0.0.1:8000/",
changeOrigin:true
}
}
}
})
2. build到子目录
build子目录需要注意三个地方
- 设置vue-router
const router = createRouter({
history:createWebHistory(import.meta.env.VITE_WEB_PATH), // 这里用的环境变量，可以自己写。
routes:[...privateRouter,...publicRouter]
})
- 需要在package.json里面配置下script
// 打包到子目录
"scripts": {
"dev": "vite",
"build": "vite build --base=/web/", //这里的 /web/ 就是子目录
"preview": "vite preview"
},
- 后端根据自己实际情况设置，naginx和IIS设置不一样，具体需要后端操作，要不然就会出现刷新404的问题
五、其他注意事项
- 因为vite不支持require的导入方式，所以在导入图片等静态资源的时候，直接用import的方式就可以了
import logo from 'assets/images/vite.svg'
