一、开发环境(development)现状
在开发环境,因为本地站点和接口站点不是同一个域名,就产生了跨域问题,但是不可能让后端开发跨域端口或使用jsonp
,所以,一般是让前端通过在webpack.config.js
中配置proxy
来走接口代理。
代码如下:
module.exports = {
dev: {
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/api": {
target: "http://192.168.100.121:31401/webapi", // 研发测试地址
changeOrigin: true,
//secure: false, //接受运行在https上的服务
pathRewrite: {
"^/api": ""
}
}
},
host: "localhost", // can be overwritten by process.env.HOST
port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: false,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
}
这样,就将本地域名代理到接口了。
二、构建后的接口映射或变更(生产环境-production)
构建成dist目录
后,就不能修改前端代码了,虽然可以在外面新建一个配置文件来更换接口,但是这种外挂的方式还是不太方便,最好就是dist
后可以被打包为docker
镜像或者发布到服务器都不需要配置端口。
也就是我们在开发时,就需要考虑这个问题,将端口地址设置好,而不是事后修改。
而且构建后端口就不会走代理访问了,是直连,意味着不存在跨域问题。
所以在前端接口中,应该是写相对路径。
三、如何实现开发和生产版本的接口地址变更
其实也容易,通过if语句
判断当前环境,然后启用不同的端口地址即可。
关键代码如下:
1、在main.js
中判断环境
if (process.env.NODE_ENV == "development") {
//开发环境
Vue.prototype.$baseUrl = process.env.baseUrl + process.env.BASE_API;
//以上两个变量的值
} else {
//生产环境
Vue.prototype.$baseUrl = process.env.BASE_API;
}
其中以上process.env.baseUrl
和process.env.BASE_API
这两个环境变量的值,是在config/prod.env.js
和config/dev.env.js
中配置的,这两个环境的配置文件最终会合并到config\index.js
来。
2、dev.env.js
的配置代码
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API:'"/api"',
baseUrl:'"http://'+config.dev.host+':'+ config.dev.port +'"'
})
3、prod.env.js
的配置代码
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"/webapi"',
}
其中config.dev.host
的值是localhost
,config.dev.port
的值是8082
,他们是在开头的webpack.config.js
配置的。
所以,main.js
中的if语句
的环境变量的值就是来自于这里,很明显的看到在生产环境中,是没有配置域名,只是配置了相对路径,这样在构建后,他们没有跨域,自然就能正常访问后端接口。
这样就实现了题目所表示的不同环境用不同后端接口的问题。
如果你对web前端开发、面试感兴趣的话可以加V:imqdcnn。群里有各种学习资源发放,免费答疑,更有行业深潜多年的技术牛人分析讲解。文章来源:https://www.toymoban.com/news/detail-616344.html
祝你能成为一名优秀的WEB前端开发工程师!文章来源地址https://www.toymoban.com/news/detail-616344.html
到了这里,关于web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!