1. 目录结构（vue2.x、vue/cli4.x）

 

2. 测试和正式环境发布

①根目录下面创建 .env.development、 .env.test、 .env.production文件，分别配置开发、测试、正式环境的请求接口地址；

.env.development： VUE_APP_BASE_API = 'https://xxx.dev.com/Api/'

.env.production ： VUE_APP_BASE_API = 'https://xxx.com/Api/'

.env.test： VUE_APP_BASE_API = 'https://xxx.test.com/Api/'

//package.json"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test": "vue-cli-service build --mode test"},

②apis/index.js 通过 process.env.VUE_APP_BASE_API 获取接口地址；

import  axios from  'axios'
import  qs from  'qs'// let baseUrl = process.env.VUE_APP_BASE_API;
let _axios = axios.create({baseURL:process.env.VUE_APP_BASE_API
})
console.log("=====API====",process.env.VUE_APP_BASE_API)function postRequest(url,params){return new Promise((resolve, reject) => {_axios.post(url, qs.stringify(params)).then(res => {if(res.data.code > 0){resolve(res.data);}else{Message.error(res.data.msg)}}).catch(err =>{// reject(err.data)     Message.error('服务器出错了')loading.close()})});
}export function login(param) {return postRequest('admin/getadmin',param)
}

③npm run serve 命令启动一个本地服务器运行的是开发环境；

④npm run build 命令生成打包文件 dist 将dist里面的文件拖进服务器即可；

⑤npm run test命令生成打包文件 dist 将dist里面的文件拖进测试服务器即可；

⑥默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，如果应用被部署在一个子路径上，你需要在vue.config.js里面加上：

publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

⑦cdn:  在src/styles/main.scss 文件里面配置公共的css变量，例如：

开发环境：$baseUrl:'../';

正式环境改成cdn地址: $baseUrl:'https://upload.cdn.be-xx.com/xxx/';

在组件里面使用：background-image: url("#{$baseUrl}assets/404.png");