Vue CLI 3部署生产环境，跨域做API请求

微信公众号：一一小知
问题或建议，请公众号留言;

Vue CLI3通用部署指南指令

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

使用 history.pushState 的路由参考：常用服务器配置指引:https://router.vuejs.org/zh/guide/essentials/history-mode.html

axios实例对baseURL进行指定，使用环境变量VUE_APP_BASE_API：

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

在客户端侧代码中使用环境变量

官方说明如下：只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret的情况下，它会被替换为 "sercet"。

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

提示

你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。这可以用于版本信息 process.env.VUE_APP_VERSION = require('./package.json').version。

参考如上说明，我们在项目根路径建立文件.env.production,定义VUE_APP_BASE_API：

NODE_ENV = 'production'
VUE_APP_BASE_API = 'https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin'

执行打包：

build打包

打包指令在package.json中做了定义：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

本地测试一下：

bianxh:Template_VueElement bianxh$ pwd
/Users/bianxh/gitRepo/OSChina/XiaoZhi/Template_VueElement
bianxh:Template_VueElement bianxh$ serve -s dist

   ┌───────────────────────────────────────────────┐
   │                                               │
   │   Serving!                                    │
   │                                               │
   │   - Local:            http://localhost:5000   │
   │   - On Your Network:  http://127.0.0.1:5000   │
   │                                               │
   │   Copied local address to clipboard!          │
   │                                               │
   └───────────────────────────────────────────────┘

在启动页面点击登录，可以看到Request URL指向了API地址：

Request URL: https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login
Request Method: POST
Status Code: 200 OK
Remote Address: 120.27.128.131:443
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:5000
Connection: keep-alive
Content-Length: 42
Content-Type: application/json; charset=utf-8
Date: Thu, 24 Jan 2019 06:24:43 GMT
Rate-Limit-Remaining: 0
Rate-Limit-Reset: 1548311083
Rate-Limit-Total: 2
Server: Tengine
Vary: Accept, Origin
X-Request-Id: af10d6c3-c43d-42ed-9547-b588ef3a9216
Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:5000
Referer: http://localhost:5000/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
{username: "admin", password: "admin1"}

可以看到响应了：

{"code":50000,"data":"登录账号不对"}

将生产页面部署到git pages上，响应也OK：

响应测试