- A+
所属分类：Web前端
步骤
-
根目录新建.env.development和.env.production文件
-
package.json配置启动参数
vite命令启动项目时，指定mode参数，加载vite.config.ts文件。
"dev": "vite --host 0.0.0.0 --port 8093 --mode development", "prod": "vite --port 8093 --host 0.0.0.0 --mode production", "build:dev": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false && vite build --mode development", "build:prod": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false && vite build --mode production", - 配置代理
在vite.config.ts中配置代理
server: { cors: true, proxy: { '/api': { target: VITE_SERVER_URL, changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^/api/, '') // 重写请求 } } } - 配置vite-plugin-html
通过vite-plugin-html组件，可以将配置文件中的数据，绑定到index.html中，可以实现不同环境的页面title和logo。
createHtmlPlugin({ inject: { data: { logo: VITE_LOGO, title: VITE_TITLE, }, }, }), 代码
准备
安装组件
"axios": "^1.6.7", "vite-plugin-html": "^3.2.2", "vue": "^3.4.15", 编码
.env.developent
# 开发环境配置 NODE_ENV='development' # 本地服务端口 VITE_PORT=8093 # 后台服务地址 VITE_SERVER_URL='http://localhost:8083' # 页面标题 VITE_TITLE='工具箱-dev' # ICO VITE_LOGO='/favicon-dev.ico' # 超时时间(ms) VITE_AXIOS_TIMEOUT=10000 .env.production
# 开发环境配置 NODE_ENV='production' # 本地服务端口 VITE_PORT=12003 # 后台服务地址 VITE_SERVER_URL='http://192.168.31.3:11003/' # 页面标题 VITE_TITLE='工具箱' # ICO VITE_LOGO='/favicon.ico' # 超时时间(ms) VITE_AXIOS_TIMEOUT=10000 vite.config.ts
import { fileURLToPath, URL } from 'node:url' import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import {createHtmlPlugin} from 'vite-plugin-html'; // https://vitejs.dev/config/ export default (({mode}: {mode: string}) => { const VITE_ENV_CONFIG = loadEnv(mode, process.cwd()); const VITE_SERVER_URL = VITE_ENV_CONFIG.VITE_SERVER_URL; const VITE_TITLE = VITE_ENV_CONFIG.VITE_TITLE; const VITE_LOGO = VITE_ENV_CONFIG.VITE_LOGO; return defineConfig({ plugins: [vue(), vueJsx(), createHtmlPlugin({ inject: { data: { logo: VITE_LOGO, title: VITE_TITLE, }, }, }), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, // 配置代理，解决跨域问题 server: { cors: true, proxy: { '/api': { target: VITE_SERVER_URL, changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^/api/, '') // 重写请求 } } } },) }) index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="icon" href="<%= logo %>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= title %></title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html> 
