2、禅道数据看板（django+vue）

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