vue环境变量配置
根据不同的指令:
npm run serve // 搭建本地环境
npm run dev // 生成测试环境文件夹(可自定义为devdist)
npm run build // 生成生产环境文件夹(一般默认为dist)
思路:
1,创建修改相关配置文件(Ctrl + C V即可)
2,封装 axios(根据配置文件,首先判断当前环境,获取对应环境的数据库地址作为当前环境下的基础地址,拼接到 axios 里面的 url )
3,模块化开发
4,使用插件对代码进行测试判断环境配置是否成功
一 项目根目录新建配置文件
.env.development
module.export = {
VUE_APP_URL = https://www.easy-mock.com/mock/example_dev
}
注:数据库地址不能加引号或分号!!
.env.production
module.export = {
VUE_APP_URL = https://www.easy-mock.com/mock/example_pro
}
package.json指令配置
"scripts": {
"serve": "vue-cli-service serve", // 本地环境
"build": "vue-cli-service build", // 生产环境
"lint": "vue-cli-service lint",
"dev": "vue-cli-service build --mode development" // 测试环境
},
vue.config.js
const path = require('path');
module.exports = {
publicPath: '/', // 默认输出的路径 就是在当前地址栏后面添加的路径 若为 'ccc' 则为 http://localhost:8085/ccc/
outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的环境打不同包名
// css: { // 一次配置,全局使用,这个scss 因为每个文件都要引入
// loaderOptions: {
// sass: {
// data: `@import "./src/assets/hotcss/px2rem.scss";`
// }
// }
// },
lintOnSave: false, // 关闭eslint
productionSourceMap: true, // 生产环境下css 分离文件
devServer: { // 配置服务器
port: 8085, // 端口
open: true,
https: false,
overlay: {
warnings: true,
errors: true
}
},
configureWebpack: { // 覆盖webpack默认配置的都在这里
resolve: { // 配置解析别名
alias: {
'@': path.resolve(__dirname, './src'),
'@h': path.resolve(__dirname, './src/assets/hotcss'),
'@s': path.resolve(__dirname, './src/assets/style'),
'@i': path.resolve(__dirname, './src/assets/images'),
}
}
}
}
此时我们就可以获取到当前的环境( main.js )
console.log('当前环境数据地址:', process.env);
// 打印如下:
{
VUE_APP_URL: "https://www.easy-mock.com/mock/example_dev", // 当前环境的数据库地址
NODE_ENV: "development", // 当前环境
BASE_URL: "/" // 默认输出路径 publicPath
}
二 封装axios
在src / utils / http.js 文件夹下 对axios进行二次封装
import axios from 'axios'
import { getToken } from '@/utils/auth'
// create an axios instance
const request = axios.create({
// baseURL: process.env.VUE_APP_URL,
baseURL: 'https://www.easy-mock.com/mock/5e8c31d84258000c6796ab64/example',
// withCredentials: true, // 跨域请求时发送cookie
timeout: 60000
})
const TOKEN = getToken() // 获取token
// 请求拦截器
request.interceptors.request.use(
config => {
if (TOKEN) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['Authorization'] = TOKEN
}
// 扩展管理--expands:[]
if (config.params && config.params.expandList) {
const expandList = config.params.expandList
const expands = {}
if (expandList && expandList.length) {
expandList.map((item, index) => {
expands[`expands[${index}]`] = item
})
config.params = {
...config.params,
...expands
}
}
delete config.params.expandList
}
return config
},
error => {
// do something with request error
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
response => {
// const res = response.data
// // if the custom code is not 20000, it is judged as an error.
// if (res.code !== 20000) {
// Message({
// message: res.message || 'Error',
// type: 'error',
// duration: 5 * 1000
// })
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
// return Promise.reject(new Error(res.message || 'Error'))
// } else {
// return res
// }
return response.data
},
error => {
const data = error.response.data
const status = error.response.status
// 对不同状态码进行管理
if (status === 401) {
console.log('登录已过期');
} else if (status === 500) {
console.log('服务器错误');
}
return Promise.reject(data.error)
}
)
export default request
三 模块化开发
新建src / api / home.js(针对 home 模块的请求方法)
import $HTTP from "@/utils/HTTP.js"
import Service from "@/utils/service.js" // 个人习惯把请求地址模块化统一管理
export function getMockData_home() {
return $HTTP.get(Service.mock_home) // 等同于$HTTP.get('/home_url')
}
export function postMockData_home(param) {
return $HTTP.post(Service.mock_home,param)
}
src / utils / service.js
export default {
mock: '/my_url',
mock_home: '/home_url'
}
在home组件里面就可以调用 getMockData_home 方法来获取数据了
<script>
import { getMockData_home , postMockData_home } from '@/api/home.js'
export default {
name: 'Home',
async created() {
let res_get = await getMockData_home()
// console.log(res_get)
let res_post = await postMockData_home({
id:123,
name:'zhangsan',
...
})
// console.log(res.post)
}
}
</script>
四 代码测试
npm i serve -g // 全局安装 serve
npm run dev // 生成测试环境代码(根据vue.config.js配置,项目根目录会出现一个devdist文件夹)
serve devdist // 模拟线上服务器,在本地新建服务器并运行代码
测试环境配置已完成,devdist 文件夹上传至测试环境服务器即可
生产环境同理(生产环境文件夹默认为 dist )