cli3暴露api地址 vue_Vue CLI 3部署生产环境，跨域做API请求

微信公众号：

Vue CLI3通用部署指南指令

npm install -g serve

# -s 参数的意思是将其架设在 Single-Page Application 模式下

# 这个模式会处理即将提到的路由问题

serve -s dist

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：

响应测试