1、vue4搭建数据看板前端框架
1.1vue-cli安装省略。官方文档:https://cli.vuejs.org/
1.2命令行创建app
命令行工具iTerm输入:vue create databoard-front
启动服务
cd databoard-front
npm run serve
1.3也可以通过 vue ui 命令以图形化界面创建和管理项目:
2、设置前端的端口号为9527
2.1Vue.config.js指定前端端口
const port = process.env.port || process.env.npm_config_port || 9527
也可以不指定,因为测试环境才会取env环境的参数
npm run serve 启动时,按照配置的端口号启动
2.2Vue.config.js跨域设置代理
module.exports = {
lintOnSave: false,
devServer: {
port: port,//也可以直接写端口号
proxy: {
'/apis': {
target: 'http://localhost:8002',
changeOrigin: true,//是否跨域
pathRewrite: {
'^/apis': ''
}
}
},
open: true,
overlay: {
warnings: false,
errors: true
}
}
},
2.3请求封装
/utils/request.js
// axios拦截器
import axios from 'axios'
// create an axios instance
const service = axios.create({
// 本地环境解析为"/apis",上线时解析为真正的后端地址
baseURL: process.env.VUE_APP_BASE_API,
// withCredentials: true, // send cookies when cross-domain requests
timeout: