微信公众号：一一小知
问题或建议，请公众号留言;
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：
响应测试
