Vue项目上线之前的编译及相关配置

需求：由于生产环境的服务器请求地址应该是你的域名，而开发环境的请求地址应该是一个本地路径的请求地址。例如：http://localhost:3000，所以我们需要通过vue的配置文件，实现项目编译后请求地址是服务器地址，在开发阶段请求的是本地接口。

第一步：将服务器请求修改为一个变量

新建了一个http.js文件，只需导出http，将其挂载在vue的原型链上，就可以实现为所有的请求都添加请求拦截器，当然也可以在这里通过相应拦截器处理一些的错误状态码。具体请查看axios官方文档。代码如下：

const axios = require('axios')
import Vue from 'vue'
import router from './router'
const http = axios.create({
    baseURL: process.env.VUE_APP_API_URL || "/admin/api"
    // baseURL: 'http://localhost:3000/admin/api'
});
http.interceptors.request.use(function (config) {
    if (localStorage.token) {
        config.headers.Authorization = 'Bearer ' + localStorage.token
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});
export default http

第二步：配置开发环境的API接口地址

新建.env.development文件，存储开发环境下的接口请求地址

VUE_APP_API_URL=http://localhost:3000/admin/api

第三步：通过Vue配置文件判断程序运行环境

添加vue配置文件（vue.config.js），在文件中设置公共路径

module.exports = {
    // 设置输出文件地址  __dirname代表当前文件夹
    outputDir:__dirname+"/../server/admin",
    // 配置环境变量，生产环境的请求路径开始为/admin/，开发环境的请求从跟地址开始
    publicPath: process.env.NODE_ENV === 'production'
      ? '/admin/'
      : '/'
  }

具体请参考Vue-cli配置文档官网说明https://cli.vuejs.org/zh/config/#vue-config-js

至此，你的程序上传服务器后跟本地开发时接口的调用都不会出现问题。

第四步：将编译后的静态文件在服务器上托管，

以nodejs（express）服务器为例：

// 托管静态文件夹
app.use('/admin', express.static(__dirname + '/admin')) // 后台管理界面代码
app.use('/', express.static(__dirname + '/web')) // 前台代码
app.use('/uploads', express.static(__dirname + '/uploads'))  // 上传服务器文件