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 = true

editorconfig 能规范我们编辑器的配置，如：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中的文件变量收集