1.在根目录添加开发环境.env.development

本地环境

NODE_ENV = development
VUE_APP_NUXT_API_URL = /api
NUXT_BASE_PORT = 3000
NUXT_BASE_LINK = http://192.168.21.80:6000
NUXT_SYSTEM_TITLE = xx管理系统
1
2
3
4
5
6
2.在根目录添加测试环境.env.test

测试环境

NODE_ENV = test
NUXT_API_URL = /official
NUXT_BASE_PORT = 3000
NUXT_BASE_LINK = http://192.168.21.80:6000
NUXT_SYSTEM_TITLE = xx管理系统
1
2
3
4
5
6
3.在根目录添加正式环境.env.production

生产环境

NODE_ENV = production
NUXT_API_URL = /official
NUXT_BASE_LINK = http://www.xxxx.com:6000
NUXT_BASE_PORT = 3000
NUXT_SYSTEM_TITLE = xx管理系统

1
2
3
4
5
6
7
4.在nuxt.config.ts中配置环境变量中的变量信息
export default defineNuxtConfig({
devtools: { enabled: true },
// 引入全局样式
css: [
"@/assets/style/main.css"
],
runtimeConfig: {
// 仅在服务器端可用的私钥
baseUrl: '/official',
// 公共中的密钥也将公开给客户端
public: {
apiUrl: process.env.NUXT_API_URL,
baseLink: process.env.NUXT_BASE_LINK
}
},
nitro: {
devProxy: {
"/api": {
target: 'http://192.168.21.80:6000/official',
prependPath: true,
changeOrigin: true,
}
},
// 该配置用于服务端请求转发
routeRules: {
'/api/': {
proxy: 'http://192.168.21.80:6000/official/'
}
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
5.配置package.json文件
使用 --dotenv指定环境
官网参考链接：https://nuxt.com/docs/api/commands/build

{
"scripts": {
"dev": "nuxt dev",
"dev-test": "nuxt dev --dotenv .env.test",
"dev-prod": "nuxt dev --dotenv .env.production",
"build": "nuxt build",
"build-test": "nuxt build --dotenv .env.test",
"build-prod": "nuxt build --dotenv .env.production",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
OK，配置完成~~