手机可以做网站的服务器吗,选择网站模板注意事项,二建注册进度查询系统,网站语言编程文章目录 vite的proxy开发环境设置如果后端没有提供可以替换的/mis等可替换的后缀的处理办法接口如何区分.env.development开发和.env.production生产环境接口在生产环境下#xff0c;还能使用proxy代理地址吗#xff1f; vite的proxy开发环境设置
环境#xff1a;
vite 4… 文章目录 vite的proxy开发环境设置如果后端没有提供可以替换的/mis等可替换的后缀的处理办法接口如何区分.env.development开发和.env.production生产环境接口在生产环境下还能使用proxy代理地址吗 vite的proxy开发环境设置
环境
vite 4.4.9(2023-9-27为止的最新版)vue3 3.3.4(2023-9-27为止的最新版)vant 4.6.8(2023-9-27为止的最新版)-这个只是UI框架不影响配置nodejs 16.16.0
开发环境配置需要在vite.config.js中进行。
完整代码如下
import { defineConfig } from vite;
import path from path;
import vue from vitejs/plugin-vue;
import Components from unplugin-vue-components/vite;
import { VantResolver } from vant/auto-import-resolver;function resolve(dir) {return path.join(__dirname, dir);
}export default defineConfig({//解决在路径中用代替src目录resolve: {alias: { : resolve(src) },},plugins: [vue(),Components({resolvers: [VantResolver()],}),],//这个是新增的本地服务器与proxy代理设置server: {open: false,port: 5171,https: false,hotOnly: false,proxy: {/mis: {target: http://106.37.73.60:8080,changeOrigin: true, //是否跨域// rewrite: (path) path.replace(/^\/mis/, ), //因为后端接口有mis前缀所以不需要替换// ws: true, //是否代理 websockets// secure: true, //是否https接口},},},
});重点关注/mis这里
如果是要访问后端的这个接口http://www.imqd.cn/mis/auth/login且你在request.js中写接口时不想写mis/auth/login而是想写/auth/login时就需要像上面配置。它的意思是将本地的地址通过代理转发替换为后端地址让它以为是同域请求。
更简单的理解是它会找到后端接口的url中的/mis将其换为本地地址。
意思就是http://www.imqd.cn/mis/auth/login会换成http://localhost/auth/login但是这样会报404错误因为替换后接口少了mis就需要加上才行就比如本地http://192.168.8.87:5171/mis/auth/login的这个接口其实要等价访问后端的http://www.imqd.cn/mis/auth/login这个接口才行。添加的办法如下
在.env.development文件中写一个变量统一添加该前缀
# base api
VITE_BASE_API /mis这时不用写rewrite了。表示请求的本地地址和跨域地址一样只是域名不一样如下所示
http://localhost:5171/mis/auth/login //本地
http://www.imqd.cn/mis/auth/login //要代理的后端真实接口地址如果后端没有提供可以替换的’/mis’等可替换的后缀的处理办法
如果后端提供的接口没有/mis等后缀接口地址直接为http://www.imqd.cn/auth/login那怎么设置请求代理地址呢
这时也简单可以用任意后缀来代替最常见的就是用/api代替了比如本地请求用http://localhost/api/auth/login来代理http://www.imqd.cn/auth/login这样就需要修改vite.config.js如下
proxy: {/api: {target: http://106.37.73.60:8080,changeOrigin: true, //是否跨域rewrite: (path) path.replace(/^\/api/, ), //后端接口没有api后缀所以需要替换// ws: true, //是否代理 websockets// secure: true, //是否https接口},
},然后在.env.development文件中改为VITE_BASE_API /api即可
接口如何区分.env.development开发和.env.production生产环境
其实对应的就是如何使用.env.development和.env.production环境。
可以在package.json中看到vite的script
scripts: {dev: vite --mode development,start: vite --host 192.168.8.81,build: vite build},默认情况下npm run dev即为开发环境npm run build即为生产环境不管在哪种环境下你可以通过在代码中使用import.meta.env.VITE_BASE_API来调用两种开发环境的env文件下的VITE_BASE_API变量的值如果是开发环境就会读取.env.development中的值生产环境就会读取.env.production中的值。
接口在生产环境下还能使用proxy代理地址吗
请注意这也是很多人会忽略的。只有在开发环境才会走vue.config.js里面的代码proxy的代理才会生效。在生产环境下因为前端代码已经被工程化构建化了即dist目录下的文件只有纯前端代码他通常会部署到和后端服务一样的域名下用的是相对地址就不存在跨域了。.env.production中设置的变量也在构建过程中体现并分布到了各个接口中如下图所示: 如果你在web前端开发、面试、前端学习路线有困难可以加我Vimqdcnn。免费答疑行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师
