本項目 GitHub 倉庫地址：https://github.com/charleylla/charley-vue-multi
上篇文章 主要介紹了 Webpack 的配置部分，這篇文章主要介紹項目中的模塊劃分，內(nèi)容不多扫步，一會就能看完。
文件結構
首先看一下 src 目錄的文件結構：
├─assets
│ ├─image
│ ├─lib
│ └─style
│ atom.scss
│ constant.scss
│ func.scss
│ main.scss
│
├─component
│ └─test
│ index.js
│ style.scss
│ template.vue
│
├─model
│ index.js
│
├─page
│ ├─home
│ │ index.js
│ │ style.scss
│ │ template.vue
│ │
│ └─index
│ index.js
│ style.scss
│ template.vue
│
├─shared
│ api.js
│ constant.js
│
└─util
index.js
request.js
下面對這些目錄進行介紹氓皱。
assets 目錄
assets 目錄用來提供公用的樣式文件，圖片及第三方庫等贮懈。
這里主要看下 style 目錄，style 目錄中有三個文件：
- atom.scss
- constant.scss
- func.scss
- main.scss
其中 atom.scss 用來定義 ATOM CSS 規(guī)則优训，constant.scss 中定義常用的變量至朵你，func.scss 用來提供常用函數(shù)和 Minxins，main.scss 用來對前面的幾個文件進行整合揣非。main.scss 的內(nèi)容如下：
@import "./constant.scss";
@import "./func.scss";
@import "./atom.scss";
component 目錄
該目錄中定義了項目中需要用到的組件抡医，component 目錄下的每個子目錄表示一個組件，每個組件由 index.js早敬，style.scss 和 template.vue 組成忌傻。
其中，template.vue 用來定義組件搞监，通過 index.js 將組件暴露出去水孩，style.scss 用來定義組件中的樣式。
page 目錄
page 中存放頁面琐驴，每個頁面都是 page 目錄中的一個子目錄俘种，文件的劃分和 component 下的組件保持一致。區(qū)別在于 index.js 文件绝淡，對于頁面級組件宙刘，需要將其掛載到根節(jié)點上。
import Vue from "vue";
import Tpl from "./template.vue";
new Vue({
render:h => h(Tpl),
}).$mount("#app");
model 目錄
該目錄用來定義每個頁面的數(shù)據(jù)獲取牢酵，如果頁面中需要和后臺進行交互悬包，就在 model 中創(chuàng)建一個文件，文件就以頁面的名字命名馍乙。
下面是 model 目錄下 index.js 的內(nèi)容：
import { testUrl } from "@shared/api";
export const getFetchTest = async () => {
const res = await new Promise(res => {
setTimeout(() => {
res(testUrl);
},2000);
});
return res;
};
當然布近，對于前后端交互的內(nèi)容垫释，也可以放在組件中，但如果頁面上的交互過多時吊输，容易引起組件文件的臃腫饶号，不易維護。因此我推薦將每個頁面的數(shù)據(jù)獲取統(tǒng)一放在 model 下統(tǒng)一管理季蚂，當需要修改數(shù)據(jù)獲取方式時茫船，不用修改組件文件，直接調(diào)整 model 中文件的內(nèi)容即可扭屁。
uitl 目錄
util 目錄中用來提供項目中的公共方法算谈，以 request.js 為例，該文件中將 Axios 的請求方法進行了封裝：
import axios from "axios";
axios.defaults.baseURL = window.env === "prod" ? window.prodBaseUrl : window.devBaseUrl;
axios.defaults.timeout = 120000;
export const getFetch = async (url,params = {}) => {
try{
const res = await axios.get(url,params);
return res;
}catch(e){
return {
code:-1,
message:e.message,
status:false,
};
}
};
export const postFetch = async (url,params = {}) => {
try{
const res = await axios.post(url,params);
return res;
}catch(e){
return {
code:-1,
message:e.message,
status:false,
};
}
};
shared 目錄
該目錄中定義了項目中公用的配置料滥，如接口地址然眼，常量等。
區(qū)分測試環(huán)境和正式環(huán)境
一般開發(fā)都會有一個測試環(huán)境和正式環(huán)境葵腹，測試環(huán)境用來在內(nèi)部提供測試高每，正式環(huán)境用來提供給用戶使用，正式環(huán)境和測試環(huán)境具有不同的接口地址践宴。
我們可以將正式環(huán)境和測試環(huán)境的接口地址分別寫在 shared 下的某個文件中鲸匿，將其和 Node 的環(huán)境變量進行綁定，構建時傳入不同的環(huán)境變量阻肩，根據(jù)環(huán)境變量在 util/request.js 中設置 Axios 的 BaseURL带欢。
但通過這樣的方式有一點問題：發(fā)布測試環(huán)境或正式環(huán)境時都需要重新打包，而這個打包僅僅是為了修改一下基礎的接口地址烤惊，很不劃算乔煞。
因此，我在根目錄的 template 目錄下定義了一個 config.js 文件柒室，打包時直接通過 copy-webpack-plugin 將該文件復制到 dist 目錄渡贾，同時在 template/index.html 文件中引用 config.js。這樣一來雄右，如果想修改基礎的接口地址剥啤，只需要在 dist 目錄下的 config.js 中，設置 window.env 即可不脯，無需重復打包府怯。
本項目 GitHub 倉庫地址為：https://github.com/charleylla/charley-vue-multi，如果您覺得我的文章對您有幫助防楷，歡迎幫我點個 Star牺丙，如果您有問題，歡迎提 Issue~
完。
