.env.development文件
ENV = 'development' # base api VITE_APP_BASE_API = '/dev-api'.env.production文件
ENV = 'production' # base api VITE_APP_BASE_API = '/api'
define: { 'process.env': { VITE_APP_BASE_API: 'https://xxx.com' } }, server: { hmr: true, // vue3 vite配置热更新不用手动刷新 host: '0.0.0.0', port: 3000, // 端口 open: false, // 启动项目后打开浏览器 hot: true, overlay: { warning: false, error: true }, proxy: { [env.VITE_APP_BASE_API]: { target: 'https://xxx.com', ws: true, changeOrigin: true, secure: false, rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '') } } } }
完整:
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import Components from 'unplugin-vue-components/vite' // 组件注册
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import vueI18n from '@intlify/vite-plugin-vue-i18n'
// 自动导入element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
// 获取.env文件里定义的环境变量
const env = loadEnv(mode, process.cwd())
// .env文件中的环境变量必须以VITE_为前缀,否则无法引用成功
return {
base: './',
build: {
publicDir: 'public',
assetsDir: 'static',
outDir: 'dist'
},
plugins: [
vue(),
AutoImport({
// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
imports: ['vue'],
resolvers: [
// 自动导入element plus相关函数(带样式)
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'Icon',
enabledCollections: ['ep']
})
]
}),
Components({
// 要搜索组件的目录的相对路径。默认 ['src/components']
dirs: ['src'],
// 组件的有效文件扩展名。
extensions: ['vue'],
// 搜索子目录
deep: true,
resolvers: [
// 自动导入element plus组件
ElementPlusResolver(),
NaiveUiResolver(),
// 自动注册图标组件
IconsResolver({
prefix: 'i',
enabledCollections: ['ep']
})
]
}),
Icons({
compiler: 'vue3',
autoInstall: true
}),
createSvgIconsPlugin({
// 这个是自己配置的图标路径,指出来(自己咋配置的咋来)
iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
// 这个表示id,按这个来就对了
symbolId: 'icon-[dir]-[name]'
}),
vueI18n({
include: resolve(__dirname, './path/to/src/locales/**')
})
],
resolve: {
// 配置路径别名
alias: {
'@': resolve(__dirname, './src'),
'api': resolve(__dirname, './src/api'),
'views': resolve(__dirname, './src/views'),
'utils': resolve(__dirname, './src/utils'),
'comp': resolve(__dirname, './src/components'),
'assets': resolve(__dirname, './src/assets'),
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
},
extensions: ['.js', '.ts', '.vue', '.json', '.less', '.css']
},
define: {
'process.env': { // 环境变量通常可以从 process.env 获得。注意Vite默认是不加载env文件的
VITE_APP_BASE_API: 'https://xxx.com'
}
},
server: {
hmr: true, // vue3 vite配置热更新不用手动刷新
host: '0.0.0.0',
port: 3000, // 端口
open: false, // 启动项目后打开浏览器
hot: true,
overlay: {
warning: false,
error: true
},
proxy: {
[env.VITE_APP_BASE_API]: {
target: 'https://xxx.com',
ws: true,
changeOrigin: true,
secure: false,
rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')
}
}
}
}
})