最近写nuxt.js项目部署到生产环境遇到了各种各样的问题。
这篇文章要写的就是部署到生产环境时调用后端的接口写外网地址不行的问题及解决方案:
使用pm2手动部署到生产环境,其中调用后端的接口外网地址是http://192.144.164.39:****/zhizihua。
但是使用pm2手动启动项目之后,可以启动,但是页面总是会跳到错误提示页面(用于接口有时无数据或调用出错时展示的页面),首先想到的就是两个原因:
一、接口无数据。去后台添加了数据,但是直接在输入http://anchors.xsn.com.cn/anchor/menu?id=78 返回下图所示错误:
解决思路:
1、在本地连接上生产服务器,curl http://localhost:3000/anchor/menu?id=78 也是返回这个错误。
2、在anchor.js中写了一个本地接口;直接返回一个json, curl http://localhost:3000/anchor/aa 可以返回正确的结果。这样就清楚了,应该是在proxy代理的时候出问题了。可是看了我的nuxt.config.js也没问题啊
modules: [ // Doc: https://github.com/nuxt-community/axios-module#usage ["@nuxtjs/axios", { // baseURL: process.env.BASE_URL || 'http://localhost:3000', } ], '@nuxtjs/proxy' ], /* ** Axios module configuration */ axios: { withCredentials: true, baseURL: conf.axiosBaseUrl, // proxy: true, }, proxy: { "/anchor": { target: conf.backBaseUrl, changeOrigin: true, pathRewrite: { "^/anchor": "" } },
3、修改外网地址为内网地址:http://172.21.16.3:****/zhizihua (172.21.16.3为内网IP),最后通过npm run build npm run pm2居然可以了。但是我仍然不知道是什么原因,各位大佬知道是什么原因吗??
二、在nuxt.js的issus中搜索说配置一下 firebase,代码如下:
build: {
transpile: [/^element-ui/],
extend(config, {
isDev,
isClient,
isServer
}) {
if (isServer) {
config.externals = {
'@firebase/app': 'commonjs @firebase/app',
'@firebase/firestore': 'commonjs @firebase/firestore',
//etc...
}
}
},
cache: true
},
可是我这样配置了,也安装了@firebase/app @firebase/firestore 这两个依赖,依然不行。github链接为:https://github.com/nuxt/now-builder/issues/41
解决方案为:
可是这个在我的项目中不起作用。
三、终级解决方案:
最后还是通过改外网地址为内网地址才得以解决。
if (process.env.NODE_ENV === 'development') {
BASE_URL = 'http://140.143.34.237:****/zhizihua'
axiosBaseUrl = 'http://localhost:3000'
backBaseUrl = 'http://140.143.34.237:****/'
} else if (process.env.NODE_ENV === 'production') {
// BASE_URL = 'http://192.144.164.39:****/zhizihua'
BASE_URL = 'http://172.21.16.3:****/zhizihua' //改192.144.164.39:****为内网172.21.16.3:****
axiosBaseUrl = 'http://anchors.xsn.com.cn'
backBaseUrl = 'http://172.21.16.3:****/'
} else if (process.env.NODE_ENV === 'test') {
BASE_URL = 'http://140.143.34.237:****/zhizihua'
axiosBaseUrl = 'http://xuexi.xsn.com.cn'
backBaseUrl = 'http://140.143.34.237:****/'
}