Antes do compilador projeto Vue on-line e configuração relacionados

Requisitos: Devido a um ambiente de produção endereço de solicitações do servidor deve ser o seu nome de domínio, endereço e solicitar o ambiente de desenvolvimento deve ser o endereço pedido um caminho local. Por exemplo: http: // localhost: 3000, por isso precisamos de arquivo de configuração vue, após a realização do projeto é compilado endereço de pedido do servidor endereço, o pedido está em interface local do estágio de desenvolvimento.

Passo: As solicitações do servidor para modificar uma variável

Http.js criado um novo arquivo, basta exportar http, será montado na cadeia de protótipos do vue, pode ser alcançado para todas as solicitações Pedir interceptores, é claro, onde você pode lidar com alguns dos erros no interceptor correspondente código de status. Para mais detalhes, consulte Axios documentos oficiais . Código é a seguinte:

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

Segundo passo: Configurar ambiente de desenvolvimento endereço da interface API

Novo ambiente de desenvolvimento de interface de arquivo .env.development o endereço pedido de armazenamento

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

O terceiro passo: determinar o arquivo de configuração do ambiente de tempo de execução por Vue

Adicionando perfil vue (vue.config.js), desde que o caminho comum no arquivo

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

Para mais detalhes, consulte o site oficial do documento de configuração Vue-cli explicou https://cli.vuejs.org/zh/config/#vue-config-js

Neste ponto, você carregar a interface de chamada do programa do servidor seguido pelo desenvolvimento local não será um problema.

Passo quatro: arquivos compilados estáticos no servidor de hospedagem,

Para nodejs (expresso) servidor, por exemplo:

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