步驟
-
根目錄新建.env.development和.env.production文件
-
package.json配置啟動(dòng)參數(shù)
vite命令啟動(dòng)項(xiàng)目時(shí)，指定mode參數(shù)，加載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/, '') // 重寫請(qǐng)求
}
}
}
- 配置vite-plugin-html
通過(guò)vite-plugin-html組件，可以將配置文件中的數(shù)據(jù)，綁定到index.html中，可以實(shí)現(xiàn)不同環(huán)境的頁(yè)面title和logo。
createHtmlPlugin({
inject: {
data: {
logo: VITE_LOGO,
title: VITE_TITLE,
},
},
}),
代碼
準(zhǔn)備
安裝組件
"axios": "^1.6.7",
"vite-plugin-html": "^3.2.2",
"vue": "^3.4.15",
編碼
.env.developent
# 開發(fā)環(huán)境配置
NODE_ENV='development'
# 本地服務(wù)端口
VITE_PORT=8093
# 后臺(tái)服務(wù)地址
VITE_SERVER_URL='http://localhost:8083'
# 頁(yè)面標(biāo)題
VITE_TITLE='工具箱-dev'
# ICO
VITE_LOGO='/favicon-dev.ico'
# 超時(shí)時(shí)間(ms)
VITE_AXIOS_TIMEOUT=10000
.env.production
# 開發(fā)環(huán)境配置
NODE_ENV='production'
# 本地服務(wù)端口
VITE_PORT=12003
# 后臺(tái)服務(wù)地址
VITE_SERVER_URL='http://192.168.31.3:11003/'
# 頁(yè)面標(biāo)題
VITE_TITLE='工具箱'
# ICO
VITE_LOGO='/favicon.ico'
# 超時(shí)時(shí)間(ms)
VITE_AXIOS_TIMEOUT=10000
vite.config.ts文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-825145.html
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))
}
},
// 配置代理，解決跨域問(wèn)題
server: {
cors: true,
proxy: {
'/api': {
target: VITE_SERVER_URL,
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/api/, '') // 重寫請(qǐng)求
}
}
}
},)
})
index.html文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-825145.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>
到了這里，關(guān)于Vite+Vue3項(xiàng)目如何獲取環(huán)境配置，并解決前端跨域問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
