Vue 简单配置公用接口地址
有时候需要本地和线上需要不同的接口地址, 这个时候可以根据
npm run build
判断
1. 首先配置
先新建一个
config.js
的文件
开发环境: 说明在本地测试的时候链接的地址
测试环境: 说明是根据npm run test
进行判断
生产环境: 说明是已经部署到线上的代码npm run build
let baseURL = ''
if (process.env.NODE_ENV === 'production') {
//根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
if (process.env.VUE_APP_TITLE === 'production') {
//production 生产环境
baseURL = 'http://192.168.10.111:8080/zhikong'
} else {
//test 测试环境
baseURL = ''
}
} else {
//development 开发环境
baseURL = 'http://192.168.10.12:8080/zhikong'
}
export default baseURL
2. package.json
文件下的配置
根据不同的指示来说明具体去调用哪个接口地址
{
"scripts": {
"serve": "vue-cli-service serve",
// 根据不同的指示来说明具体去调用那个接口地址
"build": "vue-cli-service build --mode build",
"test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
}
}
3. .env.build
和 .env.test
文件
在和
src
文件夹同级的根目录下新建.env.build
和.env.test
文件
3.1 .env.build
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
3.2 .env.test
NODE_ENV = 'production'
VUE_APP_TITLE = 'test'
4. vue.config.js
文件配置
npm run build
根据环境生成不同打包的文件夹
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
// `npm run build` 根据环境生成不同打包的文件夹
outputDir: process.env.VUE_APP_TITLE === 'production' ? 'dist-zhikong' : 'test',
assetsDir: "",
indexPath: 'index.html',
filenameHashing: true,
lintOnSave: false,
runtimeCompiler: false,
transpileDependencies: [],
productionSourceMap: false,
integrity: false,
configureWebpack:{
resolve:{
alias:{
'@': resolve('src'),
}
}
},
devServer:{
port:8080,
host:'0.0.0.0',
open:true,
https:false,
overlay: {
warnings: true,
errors: true
}
}
}