vue3后台管理框架之基础配置
配置vite.config.js
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig(({ command, mode }) => {//const env = loadEnv(mode, process.cwd(), '') //获取环境变量return {// 打包devbase: './',// 开发环境server: {port: 5002,host: true, //'0.0.0.0'open: false,strictPort: true},//预览环境preview: {port: 5002,host: true, //'0.0.0.0'},plugins: [vue()]}})
配置别名
安装依赖
pnpm i path@0.12.7 @types/node@17.0.35 -D
path为node的路径模块 , @types/node为node的typescript 提示，如：__dirname
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default ({mode})=>{return{resolve: {alias: {'@/': `${pathSrc}/`,}}}
}import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig(({ command, mode }) => {//const env = loadEnv(mode, process.cwd(), '') //获取环境变量return {base: './',server: {port: 5002,host: true, //'0.0.0.0'open: false,strictPort: true},//预览preview: {port: 5002,host: true, //'0.0.0.0'},resolve: {alias: {'@/': `${pathSrc}/`,}},plugins: [vue()]}
})tsconfig.json
// tsconfig.json{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { //路径映射，相对于baseUrl"@/*": ["src/*"] }}}
配置部分文件
新建编辑器配置文件 .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = trueeditorconfig 能规范我们编辑器的配置，如：utf-8，indent_size = 2 table缩进两个字符
pnpm i @vue/cli-service@5.0.8
安装了@vue/cli-service，在webstrom或idea中能帮我们识别"@"等，我们配置的符号，方便我们开发
新建 .npmrc
registry = https://registry.npmmirror.com国内如果访问npm慢，可以使用，阿里源地址
多环境配置
在根目录新建配置文件 .env.serve-dev
#定义的配置文件必须要以VITE_开头
VITE_APP_ENV = 'dev'
VITE_APP_BASE_URL = 'https://github.jzfai.top/micro-service-api'
#image or oss address
VITE_APP_IMAGE_URL = 'https://github.jzfai.top/gofast-image'#VIT_APP_IMAGE_URL 打印的变量中读取不到
VIT_APP_IMAGE_URL = 'VIT_APP_IMAGE_URL'
设置配置文件到启动环境中
"scripts": {"dev": "vite --mode serve-dev"},--mode 指定配置文件
环境配置中需要注意的两点：
1 在package.json的script中， 用 --model 进行指定.env变量文件
2.定义的配置文件必须要以VITE_开头，不然不会被vite中的文件变量收集