vue3笔记（12）目录 & 文件拆分 & 代码位置记录

项目有时候有部分代码可以复用，有时候需要整体修改（eg: API暴露），这篇记录一下实践中的感受。
也有一些实践中发现代码书写位置的问题，都记录在这篇里面。

请求axios统一

utils/request.ts中封装axios，在api/***.ts中调用。

1. 若所有接口来自同一台服务器
   在.env.***中设置VUE_APP_BASE_API

   NODE_ENV = 'server'
   VUE_APP_BASE_API = "http://***"
   VUE_APP_INTERFACE_URL = "http://***"

   utils/request.ts中配置VUE_APP_BASE_API

   import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
   
   axios.defaults.timeout = 50000;
   axios.defaults.headers = {
     "Content-Type": "application/json;charset=utf8",
   };
   axios.defaults.baseURL = process.env.VUE_APP_BASE_API
     ? process.env.VUE_APP_BASE_API
     : "";
   // getData, postData, putData, delData 封装

2. 若接口来自不同服务器，或者不同环境使用不同服务器，不使用base url。
   根据不同服务器接口分别在api/***.ts中编写host。

   const host = process.env.VUE_APP_MOCK
     ? "http://0.0.0.0:8080"
     : process.env.VUE_APP_INTERFACE_URL;

接口暴露

本项目生产环境中，由于接口地址是变化的，前端硬逻辑修改麻烦，所以暴露一个static/config.js文件，后端可以通过修改这个文件来给定当前接口地址。

1. static/config.js

   window.g = {
     apiUrl: "http://***"
   }

2. 在index.html中引入，<script src="./static/config.js"></script>

3. api/***.ts中根据环境获取

   const host =
     process.env.VUE_APP_PRO == "true"
       ? window.g.apiUrl
       : process.env.VUE_APP_INTERFACE_URL;

4. package.json中配置生产环境命令

   "scripts": {
      "prod": "vue-cli-service build --mode prod"
   }

   编写.env.prod

   NODE_ENV = 'prod'
   VUE_APP_PRO = 'true'

   运行npm run prod时，打包所有文件到dist，./static/*下文件将直接移动到dist目录下，后期修改apiUrl，也将直接改变请求地址。

5. App.vue 是所有页面的入口，若项目中有和 token 有关的请求，不能放在 App.vue 中，可以放在 layout/app-main.vue 中。