Requirements: Due to a production environment server requests address should be your domain name, address and request the development environment should be the request address a local path. For example: http: // localhost: 3000, so we need vue configuration file, after the realization of the project is compiled request address server address, the request is in the development stage local interface.
Step One: The server requests to modify a variable
Http.js created a new file, just export http, will mount on the prototype chain of vue, can be achieved for all requests add request interceptors, of course, where you can deal with some of the errors in the corresponding interceptor status code. For details, please see axios official documents . code show as below:
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
Step Two: Configure development environment API interface address
New .env.development file interface development environment in the storage request address
VUE_APP_API_URL=http://localhost:3000/admin/api
The third step: determine the runtime environment configuration file by Vue
Adding vue profile (vue.config.js), provided the common path in the file
module.exports = {
// 设置输出文件地址 __dirname代表当前文件夹
outputDir:__dirname+"/../server/admin",
// 配置环境变量，生产环境的请求路径开始为/admin/，开发环境的请求从跟地址开始
publicPath: process.env.NODE_ENV === 'production'
? '/admin/'
: '/'
}
For details, see Vue-cli configuration document's official website explained https://cli.vuejs.org/zh/config/#vue-config-js
At this point, you upload the program call interface of the server followed by the local development will not be a problem.
Step four: static compiled files on the server hosting,
To nodejs (express) server, for example:
// 托管静态文件夹
app.use('/admin', express.static(__dirname + '/admin')) // 后台管理界面代码
app.use('/', express.static(__dirname + '/web')) // 前台代码
app.use('/uploads', express.static(__dirname + '/uploads')) // 上传服务器文件
