- 在项目根目录下新建.env.development和.env.production文件,里面配置环境变量
.env.development内容如下
# 页面标题
VITE_APP_TITLE = 云风网
# 开发环境配置
VITE_APP_ENV = development
# 开发环境
VITE_APP_BASE_API = /api
# 是否启用代理
VITE_HTTP_PROXY = true
# 端口
VITE_PORT = 80
#本地环境接口地址
VITE_SERVE = ''
.env.production内容如下
# 页面标题
VITE_APP_TITLE = 云风网
# 生产环境配置
VITE_APP_ENV = production
# 小麒物联/开发环境
VITE_APP_BASE_API = /api
# 是否启用代理
VITE_HTTP_PROXY = false
# 端口
VITE_PORT = 80
#本地环境接口地址
VITE_SERVE = ''
# 是否在打包时开启压缩,支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
- 在vite.config.ts中引入环境变量
ts
import { defineConfig,loadEnv } from 'vite'
import createVitePlugins from './vite/plugins'
import path from 'path'
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
const { VITE_APP_ENV,VITE_APP_BASE_API,VITE_SERVE,VITE_PORT } = env
console.log(VITE_APP_ENV,VITE_APP_BASE_API,VITE_SERVE,VITE_PORT)
return {
base: VITE_APP_ENV === 'production' ? '/' : '/',
plugins: [createVitePlugins(env, command === 'build')],
resolve: {
alias: {
// 设置路径
'~': path.resolve(__dirname, './'),
// 设置别名
'@': path.resolve(__dirname, './src')
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
//代理
server: {
host: '0.0.0.0',
port: VITE_PORT || 80,
https: false,
open: true,
proxy: {
[VITE_APP_BASE_API]: {
target: VITE_SERVE,
changeOrigin: true,
rewrite: path => path.replace(RegExp(`^${VITE_APP_BASE_API}`), '')
}
},
disableHostCheck: true
},
css: {
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
if (atRule.name === 'charset') {
atRule.remove();
}
}
}
}
]
}
},
build:{
rollupOptions:{
output:{
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames:'static/[ext]/[name]-[hash][extname]',
//manualChunks 两种使用形式
// manualChunks:{
// elementPlus:['element-plus']
// }
manualChunks(id) {
if (id.includes('element-plus')) {
return 'element-plus';
}
}
}
}
}
}
})