- import { defineConfig } from 'vite'
- import vue from '@vitejs/plugin-vue'
-
- export default defineConfig(({ command, mode }) => {
- //const env = loadEnv(mode, process.cwd(), '') //获取环境变量
- return {
- // 打包dev
- base: './',
- // 开发环境
- 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中的文件变量收集