【Vue】實戰專案:電商後臺管理系統(九)專案優化+上線

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第14天,活動詳情檢視:2021最後一次更文挑戰

專案地址:https://gitee.com/ykang2020/vue_shop

專案終於做完了,今天我們來對我們之前做的專案進行一下優化,然後就是將我們的專案進行上線~

1. 專案優化

1.1 網頁頂部新增進度條效果

安裝執行依賴nprogresst https://github.com/rstacruz/nprogress

main.js 匯入並配置攔截器

```javascript // 匯入 NProgress import NProgress from 'nprogress' import 'nprogress/nprogress.css'

import axios from 'axios' // 配置請求的根路徑 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // 通過axios請求攔截器新增token,保證擁有獲取資料的許可權 // 在 request 攔截器中,展示進度條 NProgress.start() axios.interceptors.request.use(config => { // 為請求頭物件,新增 Token 驗證的 Authorization 欄位 // console.log(config) NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') // 在最後必須 return config return config }) // 在 response 攔截器中,隱藏進度條 NProgress.done() axios.interceptors.response.use(config => { NProgress.done() return config }) ```

1.2 console問題

在這裡插入圖片描述

1.2.1 在執行build命令期間移除所有console

安裝開發依賴babel-plugin-transform-remove-console 在這裡插入圖片描述 babel.config.js

javascript module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], ['transform-remove-console'] ] } 在這裡插入圖片描述

1.2.2 只在釋出階段移除所有的console

```javascript // 這是專案釋出階段需要用到的 babel 外掛 const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console') }

module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], // 釋出產品時候的外掛陣列 [...prodPlugins] ] } ```

1.3 生成打包報告

打包時,為了直觀地發現專案中存在的問題,可以在打包時生成報告,生成報告的方式有兩種

1.3.1 通過命令列引數的形式生成報告

powershell // 通過 vue-cli 的命令選項可以生成打包報告 // --report 選項可以生成 report.html 以幫助分析包內容 vue-cli-service build --report

1.3.2 通過視覺化UI面板直接生成並檢視報告(推薦使用)

控制檯-分析面板 在這裡插入圖片描述 在這裡插入圖片描述 在這裡插入圖片描述

1.4 修改webpack配置

通過 視覺化介面 工具生成的專案,預設隱藏了所有 webpack 的配置項,目的是為了遮蔽專案的配置過程,讓程式設計師把工作的重心,放到具體功能和業務邏輯的實現上

如果有修改 webpack 預設配置的需求,可以在專案根目錄中,按需建立 vue.config.js 這個配置檔案,從而對專案的打包釋出過程做自定義的配置(具體配置參考 https://cli.vuejs.org/zh/config/#vue-config-js)。

javascript // vue.config.js // 這個檔案中,應該匯出一個包含了自定義配置選項的物件 module.exports = { // 選項... }

1.4.1 為開發模式與釋出模式指定不同的打包入口

預設情況下,Vue專案的開發模式與釋出模式,共用同一個打包的入口檔案(即 src/main.js)。為了將專案的開發過程與釋出過程分離,我們可以為兩種模式,各自指定打包的入口檔案,即:

①開發模式的入口檔案為 src/main-dev.js

②釋出模式的入口檔案為 src/main-prod.js

1.4.2 configureWebpack 與chainWebpack 作用相同用法不同

在 vue.config.js 匯出的配置物件中,新增 configureWebpack 或 chainWebpack 節點,來自定義 webpack 的打包配置。

configureWebpack 和 chainWebpack 的作用相同,唯一的區別就是它們修改 webpack 配置的方式不同:

①chainWebpack 通過鏈式程式設計的形式,來修改預設的 webpack 配置 ②configureWebpack 通過操作物件的形式,來修改預設的 webpack 配置

兩者具體的使用差異,可參考如下網址: https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

1.4.3 通過chainWebpack自定義打包

javascript module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') }) config.when(process.env.NODE_ENV === 'development', config => { config .entry('app') .clear() .add('./src/main-dev.js') }) } }

1.5 載入外部CDN資源

預設情況下,通過 import 語法匯入的第三方依賴包,最終會被打包合併到同一個檔案中,從而導致打包成功後,單檔案體積過大的問題。

為了解決上述問題,可以通過 webpack 的 externals 節點,來配置並載入外部的 CDN 資源。凡是宣告在 externals 中的第三方依賴包,都不會被打包。

1.5.1 externals 配置並載入外部 CDN 資源

  1. 在vue.config.js中新增

```javascript module.exports = { chainWebpack: config => { // 釋出模式 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js')

  config.set('externals', {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor'
  })
})
// 開發模式
config.when(process.env.NODE_ENV === 'development', config => {
  config
    .entry('app')
    .clear()
    .add('./src/main-dev.js')
})

} } ```

  1. 刪除main.js中的引入樣式表程式碼
  2. 同時,需要在 public/index.html 檔案的頭部,新增如下的 CDN 資源引用:

```html

```

```html

```

1.5.2 效果

在這裡插入圖片描述

1.5.3 優化ElementUI的打包

雖然在開發階段,我們啟用了 element-ui 元件的按需載入,儘可能的減少了打包的體積,但是那些被按需載入的元件,還是佔用了較大的檔案體積。

此時,我們可以將 element-ui 中的元件,也通過 CDN 的形式來載入,這樣能夠進一步減小打包後的檔案體積。 具體操作流程如下:

①在 main-prod.js 中,註釋掉 element-ui 按需載入的程式碼 ②在 index.html 的頭部區域中,通過 CDN 載入 element-ui 的 js 和 css 樣式

```html

```

1.5.4 效果

在這裡插入圖片描述

1.6 首頁title內容自定義

不同的打包環境下,首頁內容可能會有所不同。我們可以通過外掛的方式進行定製,外掛配置如下

在 public/index.html 首頁中,可以根據 isProd 的值,來決定如何渲染頁面結構:

```javascript module.exports = { chainWebpack: config => { // 釋出模式 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js')

  config.set('externals', {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor'
  })

  config.plugin('html').tap(args => {
    args[0].isProd = true
    return args
  })
})
// 開發模式
config.when(process.env.NODE_ENV === 'development', config => {
  config
    .entry('app')
    .clear()
    .add('./src/main-dev.js')

  config.plugin('html').tap(args => {
    args[0].isProd = false
    return args
  })
})

} } ```

```html

<%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商後臺管理系統

<% if(htmlWebpackPlugin.options.isProd) { %>

<% } %> ```

1.7 實現路由懶載入

當打包構建專案時,JavaScript 包會變得非常大,影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。

具體需要 3 步:

①安裝開發依賴 @babel/plugin-syntax-dynamic-import 包

②在 babel.config.js 配置檔案中宣告該外掛

javascript module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ], // 釋出產品時候的外掛陣列 [...prodPlugins], ['@babel/plugin-syntax-dynamic-import'] ] }

③將路由改為按需載入的形式,示例程式碼如下:

javascript const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

```javascript import Vue from 'vue' import VueRouter from 'vue-router'

// import Login from '../components/Login.vue' const Login = () => import(/ webpackChunkName: "Login_Home_Welcome" / '../components/Login.vue') // import Home from '../components/Home.vue' const Home = () => import(/ webpackChunkName: "Login_Home_Welcome" / '../components/Home.vue') // import Welcome from '../components/Welcome.vue' const Welcome = () => import(/ webpackChunkName: "Login_Home_Welcome" / '../components/Welcome.vue')

// import Users from '../components/user/Users.vue' // import Rights from '../components/power/Rights.vue' // import Roles from '../components/power/Roles.vue' const Users = () => import(/ webpackChunkName: "Users_Rights_Roles" / '../components/user/Users.vue') const Rights = () => import(/ webpackChunkName: "Users_Rights_Roles" / '../components/power/Rights.vue') const Roles = () => import(/ webpackChunkName: "Users_Rights_Roles" / '../components/power/Roles.vue')

// import Cate from '../components/goods/Cate.vue' // import Params from '../components/goods/Params.vue' const Cate = () => import(/ webpackChunkName: "Cate_Params" / '../components/goods/Cate.vue') const Params = () => import(/ webpackChunkName: "Cate_Params" / '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue' // import Add from '../components/goods/Add.vue' const GoodsList = () => import(/ webpackChunkName: "GoodsList_Add" / '../components/goods/List.vue') const Add = () => import(/ webpackChunkName: "GoodsList_Add" / '../components/goods/Add.vue')

import Order from '../components/order/Order.vue' import Report from '../components/report/Report.vue' const Order = () => import(/ webpackChunkName: "Order_Report" / '../components/order/Order.vue') const Report = () => import(/ webpackChunkName: "Order_Report" / '../components/report/Report.vue')

Vue.use(VueRouter) ```

之前

在這裡插入圖片描述

之後

在這裡插入圖片描述

關於路由懶載入的詳細文件,可參考如下連結

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

2. 專案上線

2.1 通過node建立web伺服器

  1. 建立 node 專案,並安裝 express

通過 express 快速建立 web 伺服器,將 vue 打包生成的 dist 資料夾,託管為靜態資源即可

建立與vue_shop同級的資料夾vue_shop_server 執行命令 powershell npm init -y cnpm install express -S

  1. 複製vue_shop資料夾中dist資料夾到vue_shop_server中
  2. vue_shop_server中新建app.js檔案

```javascript const express = require('express') // 建立web伺服器 const app = express()

// 託管靜態資源 app.use(express.static('./dist'))

// 啟動web伺服器 app.listen(80, () => { console.log("server running at http://127.0.0.1") }) `` 4. 執行node app.js` 5. 通過http://127.0.0.1 可以訪問專案

2.2 開啟檔案的Gzip網路傳輸壓縮

使用 gzip 可以減小檔案體積,使傳輸速度更快。可以通過伺服器端使用 Express 做 gzip 壓縮。

  1. 安裝compression包

powershell cnpm install compression -S

  1. 使用

```javascript const compression = require('compression')

// 寫在靜態資源託管之前 app.use(compression()) ``` 3. 效果 在這裡插入圖片描述

2.3 配置HTTPS服務

為什麼要啟用 HTTPS 服務?

  • 傳統的 HTTP 協議傳輸的資料都是明文,不安全
  • 採用 HTTPS 協議對傳輸的資料進行了加密處理,可以防止資料被中間人竊取,使用更安全

申請 SSL 證書(https://freessl.org or https://freessl.cn/

①進入 https://freessl.cn/ 官網,輸入要申請的域名並選擇品牌。

②輸入自己的郵箱並選擇相關選項。

③驗證 DNS(在域名管理後臺新增 TXT 記錄)。

④驗證通過之後,下載 SSL 證書( full_chain.pem 公鑰;private.key 私鑰)。

在後臺專案中匯入證書

javascript const https = require('https'); const fs = require('fs'); const options = { cert: fs.readFileSync('./full_chain.pem'), key: fs.readFileSync('./private.key') } // app.listen(80, () => { // console.log("server running at http://127.0.0.1") // }) https.createServer(options, app).listen(443);

2.4 使用pm2管理應用

關閉終端視窗可以正常執行專案

①在伺服器中安裝 pm2:cnpm install pm2 -g

②啟動專案:pm2 start 指令碼 --name 自定義名稱

powershell pm2 start ./app.js --name web_vueshop

在這裡插入圖片描述

③檢視執行專案:pm2 ls

④重啟專案:pm2 restart 自定義名稱/id

⑤停止專案:pm2 stop 自定義名稱

⑥刪除專案:pm2 delete 自定義名稱

專案地址:https://gitee.com/ykang2020/vue_shop

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」