前端多环境配置ts版本

93 阅读1分钟

创建文件

.env 开发环境

# base api
VITE_BASE_API='http://localhost:8080/'

VITE_PUBLIC_PATH = ''

# version
VITE_VER_MAIN = '1'
VITE_VER_SUB  = '0.0'
VITE_VER_STATE = 'dev'

.env.production 线上环境

image.png

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

export default ({ mode }) => {
	const env = loadEnv(mode, process.cwd());
	return defineConfig({
		plugins: [vue()],
		resolve: {
			alias: {
				"@": path.resolve(__dirname, "src"),//别名设置
				'vue': 'vue/dist/vue.esm-bundler.js'
			}
		},
		server: {
			host: '0.0.0.0',
			port: 3000,
			open: true,
			proxy: {
				"/api": {
					target: env.VITE_BASE_API,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/api/, '/')
				}
			}
		},
		// 强制预构建插件包
		optimizeDeps: {
			include: ['axios'],
		},
		// 打包配置
		build: {
			target: 'modules',
			outDir: 'dist', //指定输出路径
			assetsDir: 'assets', // 指定生成静态资源的存放路径
			minify: 'terser' // 混淆器,terser构建后文件体积更小
		},
	})

}

tsconfig.json 新增baseUrl,paths

{
  "compilerOptions": {
    "baseUrl": "./", 
    "paths":{ 
      "@/*": ["src/*"] // 对应 resolve.alias 指向目录
    }
  },
}