目錄

• vue項目打包后部署線上報錯解決
  • 1、問題
  • 2、解決

vue項目打包后部署線上報錯解決

1、問題

vue項目，我是用vue-cli創建，沒有使用各種腳手架，非常簡單純潔。package.json里面也是使用默認的配置：

在使用axios時，封裝了一個 http.js 工具：

import axios from 'axios'
import Qs from 'qs'
import JsCookie from 'js-cookie'//需要安裝js-cookie插件
axios.defaults.timeout = 5000
axios.defaults.withCredentials= true//允許跨越時攜帶cookie並不是加上就能跨域

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
const AUTH_TOKEN = JsCookie.get('token');
if (JsCookie.get('token')) {//需要導入js-cookie插件
  axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
}
//判斷環境
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://192.168.1.8:8010/';
} else {
  axios.defaults.baseURL = 'http://xxx.xxx.xx.xxx:8080/';
}
//請求之前的配置
axios.interceptors.request.use(function (config) {
  // console.log(config.method)
  if (config.method.toLowerCase() === 'post') {
    if (config.headers['upload']){
      config.headers = {
        'Cache-Control': 'no-cache',
        'Content-Type': 'multipart/form-data'
      }
      return config;
    }
    config.data = Qs.stringify(config.data)
  }
  if (config.method.toLowerCase() === 'put') {
    config.data = Qs.stringify(config.data)
  }
  if (config.method.toLowerCase() === 'delete') {
    config.data = Qs.stringify(config.data)
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});
//響應之后的配置
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  console.log(error);
  return Promise.reject(error);
});
export default axios;

在開發時，啟動項目都沒問題：

npm i

npm run dev

打包編譯也沒問題：

npm run build

但是把它放到nginx下，訪問時卻報錯：

2、解決

問題就出在 http.js這個工具類里面，只需更改一下生產環境后端接口的地址即可：

也就是： axios.defaults.baseURL = 'http://xxx.xxx.xx.xxx:8080/'; 這一行，換成自己的地址即可。