1.項目搭建
? ? 1.命令行
vue create 項目名????????
? ? 2.選擇模版 （根據項目的需要進行安裝，按步驟走下來就可以了）? ? ? ? ? ?
建議使用自定義安裝，因為默認安裝只安裝了babel和eslint，當自定義安裝之后，可以將其保存為模版，下一次創建項目時使用自己的模版創建。
1）以手動設置為例，根據項目需求進行安裝，上下鍵移動，空格鍵選擇
? ?- Babel : 將ES6編譯成ES5
? ?- TypeScript: javascript類型的超集
? ?- Progressive Web App (PWA) Support: 支持漸進式的網頁應用程序
? ?- Router:vue-router
? ?- Vuex: 狀態管理
? ?- CSS Pre-processors: CSS預處理
? ?- Linter / Formatter: 開發規范
? ?- Unit Testing: 單元測試
? ?- E2E Testing: 端到端測試
2）接下來會提示你路由是否使用history模式，根據你的需求選擇y或n
3）選擇css處理器，建議如果使用sass，選擇Sass/SCSS (with dart-sass)，原因可以參考這篇文章為什么使用Dart？
4）選擇Eslint代碼驗證規則（可以選擇基礎配置）以及什么時候進行代碼檢查（建議保存時進行代碼檢查）
5）選擇將Babel，PostCSS，ESLint配置文件放在哪里，一般情況獨立放置
6）接下來提示你是否將此保存為模版，選擇是，然后輸入模版名稱，之后在創建項目就可以直接用自己定義的這套模版來安裝了
2.項目配置
先來看一眼目錄結構（自己添加了一些文件）
1.分環境打包配置
在根目錄新建文件夾env_config,然后新建幾個json文件（一般情況下會有測試test、開發development、生產production），用來配置不同環境的配置參數，以測試環境為例（其它環境按著測試環境進行修改就可以了）
? ??test.json文件
{
????"VUE_APP_RUN_ENV": "test",
????"baseUrl": "http://www.test.com"
}
在env_config文件下新建一個env.load.js文件
const RUN_SERVER = process.env.run_server || 'development';?
const DefaultENVConfig = require('./development');
const serverEnvConfig = Object.assign({}, DefaultENVConfig, require('./' + RUN_SERVER + '.json'));
module.exports = serverEnvConfig;
在根目錄下新建vue.config.js文件，導入serverEnvConfig
const serverEnvConfig = require('./env_config/env.load');
module.exports = {
chainWebpack: config => {
????config.plugin('define').tap(args => {
????????????for (let i in serverEnvConfig) {
????????????????args[0]['process.env'][i] = `"${serverEnvConfig[i]}"`;
? ? ? ? ? ? }
????????????return args;
????????});
????}
};
修改package.json文件
? ? 1）cross-env：windows不支持NODE_ENV=development的設置方式，cross-env這個包可以提供一個設置環境變量的scripts，讓你能夠以unix方式設置環境變量，然后在windows上也能兼容運行。
? ? 2）run_server：對應不同的服務環境，在打包時，只要運行不同的 script 腳本就能獲取到相關的環境變量并添加到構建進程中。
? ? 3）--mode：? ? 指定環境模式
"scripts": {
????"serve": "cross-env run_server=development vue-cli-service serve --mode development",
????"build:test": "cross-env run_server=test vue-cli-service build --mode test",
????"build:pro": "cross-env run_server=production vue-cli-service build --mode production",
????"lint": "vue-cli-service lint"
},
（如果想要檢測一下配置是否正確，可以將打包的build命令改為serve命令，如：build:pro": "cross-env run_server=production vue-cli-service serve --mode production，這樣在本地運行的時候，就可以看到訪問的接口是測試的還是開發的）
（?或者cmd中敲 vue inspect > output.js，可以查看配置信息?）
2.端口號修改
? ? 項目啟動后，端口號是隨機的（我的每次啟動端口號都不一樣），常理來講，在vue.config.js中設置port就可以了，但是我的不行，郁悶。之后發現需要去node_modules里去修改一下
@vue/cli-service/lib/commands/serve.js? ? ?81行修改為如下（其中projectDevServerOptions.port會去vue.config.js中找你設置的port）
const port = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
然后在vue.config.js文件module.exports中添加配置
devServer: {
????open: true,? ?// 在服務器啟動時打開瀏覽器（也可以在package.json中通過命令行參數進行設置? --open）
????port: 8082? ? // 端口號
}
3.封裝console.log
? ? 項目對接接口時，一般會一直使用console.log，但是由于本人有些懶，感覺寫法太繁瑣，于是想要把console.log()縮寫為log()，因為在js文件中，可以這樣來寫let log = console.log.bind(console);但是在vue項目中，希望可以全局引入一下，然后在每個文件中都可以直接使用，于是Google了一番，將其掛載到vue原型上就可以解決了（在utils中新建一個global.js文件）
//??global.js
const log = console.log.bind(console);
export default {
????install (Vue, options) {
????????Vue.prototype.log = log;
????}
};
????之后在main.js注冊
import global from './utils/global';
Vue.use(global);
這樣在這個項目中就可以直接使用this.log()來代替console.log();
4.封裝axios
? 1）安裝axios
npm i axios
2）在src文件夾下新建utils文件夾，接著創建request.js用來封裝axios
import axios from 'axios';
// 創建axios實例
const service = axios.create({?
????baseURL: process.env.baseUrl,? // 根據運行環境找到對應的baseUrl? （前邊已經配置過分環境打包）
????withCredentials: true,? // 請求頭攜帶cookies
????timeout: 15000 // 超時請求
});
// request攔截器
service.interceptors.request.use(function (config) {?
? ? // 自定義一些config配置
????return config;
????}, error => {?
? ? // 處理錯誤
????Promise.reject(error);
????}
);
// response攔截器
service.interceptors.response.use(?
????response => {?
????????const code = response.data.code;?
????????switch (code) {?
????????????case '400':?
? ??????????????this.log('錯誤請求');?
????????????????break;?
????????????case '404':?
????????????????this.log('未登錄');
? ? ? ? ? ? ? ? break;?
????????}
????????return response.data;
????}
);
export default service;
使用的時候，在src下新建api/,用來統一管理請求接口，這樣方便維護和管理，比如，可以這樣
5.使用CDN加速
? ? 在項目打包時，引入的element，axios等都會被打包到vendors.js文件中，體積會相對比較大，可以使用CDN的方式引入，打包時不將這些打包進去，自行搜索element，axios等的CDN地址，引入到index.html中，然后在vue.config.js中進行配置
configureWebpack: {?
????// 把webpack的配置寫在這里 會自動合并 // 以下庫使用cdn，不會被打包?
????externals: {?
????????'axios': 'axios',
?????????'vue': 'Vue',?
????????'vuex': 'Vuex',
?????????'vue-router': 'VueRouter',? ?// 注意這里需要把安裝的vue-router卸載
????????'element-ui': 'ELEMENT'? ? // 這里就不用在main.js中引入了，css在index.html中用link引入，這樣打包的時候就不會把樣式也打包進去了
????}
}
可以看下使用CDN之前和之后的項目打包的大小
6.啟動gzip壓縮
1）命令行安裝
npm i -D compression-webpack-plugin
2）vue.config.js中module.exports中添加配置項
productionSourceMap: true? ? // 開啟gzip，此操作需要nginx配置
gzip壓縮需要服務端也進行配置，具體可參考這篇文章??啟動gzip壓縮及后臺配置
假如以上提到的vue.config.js文件中有些不知道如何配置的小伙伴，可以參考如下完整的vue.config.js
