How to configure cross-domain, proxy domain name, the following is the proxy of vite
server: {
port: 8516,
host: true,
open: true,
proxy: {
'/license-province': {
target: 'http://xxx.xxx.x.xxx:xxxx',
changeOrigin: true,//是否跨域
rewrite: (p) => p.replace(/^\/license-province/, 'license-province')//重写路径
}
}
},
Distinguish between development and production environments, and pre-release environments
在根目录创建 .env[mode]文件,在项目执行 npm run dev 的时候vite会自动去读取 .env.development 文件里面的配置,执行 npm run build 进行打包之后也会自动将 .env.production 的内容打包进去.
注意: 如果你想进入预发布模式的话需要在打包的时候进行mode配置: npm run build --mode staging
公共的: .env
开发环境: .env.development
生产环境: .env.production
预发布环境: .env.staging
There will be VITE_APP_ENV configuration in our .env.development and .env.production files :
In our vite.config.js file:
The above is the configuration of vite.config.js, which shows that the domain name of the corresponding environment is requested in different environments and the proxy is configured for cross-domain.
Proxy is commonly used in VUE to solve cross-domain problems
1. Set the code in vue.config.js:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 配置跨域
'/api':{
target:`http://xxx.xxx.xxx`, //请求后台接口
changeOrigin:true, // 允许跨域
pathRewrite:{
'^/api' : '' // 重写请求
}
}
},
}
2. When creating an axioss instance, set baseUrl to '/api'
const http = axios.create({
timeout: 1000 * 1000000,
withCredentials: true,
BASE_URL: '/api'
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})