Vue3+Vite2配置
# Vue3+Vite2配置
[TOC]
# 一、环境变量配置
# 开发环境
项目根目录创建.env.development文件
.env.development
NODE_ENV=development
VITE_APP_WEB_URL=https://www.xxx.com/api
1
2
3
2
3
# 生产环境
项目根目录创建.env.production
.env.production
NODE_ENV=production
VITE_APP_WEB_URL=https://www.xxx.com/api
1
2
3
2
3
# 在项目中使用
import.meta.env.VITE_APP_WEB_URL
1
# 二、vite.config.js配置
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
// https://vitejs.dev/config/
export default ({ mode }) => {
return defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
}
},
base: './', // 设置打包路径
server: {
host: '0.0.0.0', // 解决项目启动后use `--host` to expose没有将f
port: 4000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true // 允许跨域
// 设置代理，根据我们项目实际情况配置
// proxy: {
// '/api': {
// target: loadEnv(mode, process.cwd()).VITE_APP_WEB_URL,
// changeOrigin: true,
// secure: false,
// rewrite: (path) => path.replace(/^\/api/, '/api')
// }
// }
}
})
}
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
32
33
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
32
33
# 三、搭配axios配置baseURL
/**
* 如果是开发环境不设置baseUrl,通过proxy设置代理进行重写
* 生产环境下从.env.production中取出VITE_APP_WEB_URL进行配置
*/
const baseURL = <string>import.meta.env.MODE === 'development' ? '' :<string>import.meta.env.VITE_APP_WEB_URL
const axios = Axios.create({
baseURL,
withCredentials: true,
timeout: 20000 // 请求超时 20s
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 四、启动、打包命令配置package.json
...
"scripts": {
"dev": "vite",
"test": "vite --mode test",
"prod": "vite --mode production",
"build": "vite build",
"build:dev": "vite build --mode development",
"build:test": "vite build --mode test",
"serve": "vite preview",
"prepare": "husky install"
},
...
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
执行命令：
// 启动服务
npm run dev // 启动开发环境接口地址
npm run test // 启动测试环境接口地址
npm run prod // 启动生产环境接口地址
// 打包
npm run build // 打包到生产环境
npm run build:test // 打包到测试环境
npm run build:dev // 打包到开发环境
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
上次更新: 10/21/2021, 1:52:09 PM