項目優化和發佈

項目優化

實現步驟：

生成打包報告，根據報告優化項目
第三方庫啓用CDN（通過externals加載外部CDN）
通過CDN加載Element-UI，在main-prod.js中註釋掉按需加載，同時在index.html頭部通過CDN加載element.ui的js和css樣式
首頁內容定製：不同環境下產生不同內容。通過插件進行定製
路由懶加載：打包時，JS包非常大，我們把不同路由對應的組件分割成不同代碼塊，然後當路由被訪問到的時候才加載對應組件，這樣就更高效了。
路由懶加載步驟：

安裝@babel/plugin-syntax-dynamic-import包
在babel.config.js配置文件中聲明該插件
將所有路由由import...from...改爲按需加載的形式。./Bar.vue是路由組件存放路徑，/* webpackChunName:"group-foo"分組，相同分組會被打包到同一個文件。

const Foo = () => import(/* webpackChunName:"group-foo" */'./Bar.vue')

根據報錯修改代碼

根據ESLint的警告提示更改對應的代碼
在.prettierrc文件中更改設置"printWidth":200, 將每行代碼的文字數量更改爲200

{
    "semi":false,
    "singleQuote":true,
    "printWidth":200
}

執行build

安裝一個插件（babel-plugin-transform-remove-console）在項目build階段移除所有的console信息
打開項目控制檯，點擊依賴->開發依賴，輸入babel-plugin-transform-remove-console，安裝
打開babel.config.js，編輯代碼如下：

//項目發佈階段需要用到的babel插件
const productPlugins = []

//判斷是開發還是發佈階段
if(process.env.NODE_ENV === 'production'){
  //發佈階段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

生成打包報告

命令行形式生成打包報告vue-cli-service build --report
在vue控制檯生成打包報告：點擊“任務”=>“build”=>“運行”
運行完畢之後點擊右側“分析”，“控制檯”面板查看報告

6.修改webpack的默認配置

默認情況下，vue-cli 3.0生成的項目，隱藏了webpack配置項，如果我們需要配置webpack
需要通過vue.config.js來配置。
在項目根目錄中創建vue.config.js文件，

module.exports = {
    chainWebpack:config=>{
        //發佈模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認的打包入口，調用clear則是刪除默認的打包入口
            //add添加新的打包入口
            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')
        })
    }
}

補充：

chainWebpack可以通過鏈式編程的形式，修改webpack配置
configureWebpack可以通過操作對象的形式，修改webpack配置

加載外部CDN

默認情況下，依賴項的所有第三方包都會被打包到js/chunk-vendors.******.js文件中，導致該js文件過大
那麼我們可以通過externals排除這些包，使它們不被打包到js/chunk-vendors.******.js文件中

module.exports = {
    chainWebpack:config=>{
        //發佈模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默認的打包入口，調用clear則是刪除默認的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')

            //使用externals設置排除項
            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')
        })
    }
}

設置好排除之後，爲了使我們可以使用vue，axios等內容，我們需要加載外部CDN的形式解決引入依賴項。
打開開發入口文件main-prod.js,刪除掉默認的引入代碼

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './plugins/element.js'
//導入字體圖標
import './assets/fonts/iconfont.css'
//導入全局樣式
import './assets/css/global.css'
//導入第三方組件vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'
//導入進度條插件
import NProgress from 'nprogress'
//導入進度條樣式
// import 'nprogress/nprogress.css'
// //導入axios
import axios from 'axios'
// //導入vue-quill-editor（富文本編輯器）
import VueQuillEditor from 'vue-quill-editor'
// //導入vue-quill-editor的樣式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//請求在到達服務器之前，先會調用use中的這個回調函數來添加請求頭信息
axios.interceptors.request.use(config => {
  //當進入request攔截器，表示發送了請求，我們就開啓進度條
  NProgress.start()
  //爲請求頭對象，添加token驗證的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必須返回config
  return config
})
//在response攔截器中，隱藏進度條
axios.interceptors.response.use(config =>{
  //當進入response攔截器，表示請求已經結束，我們就結束進度條
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false

//全局註冊組件
Vue.component('tree-table', TreeTable)
//全局註冊富文本組件
Vue.use(VueQuillEditor)

//創建過濾器將秒數過濾爲年月日，時分秒
Vue.filter('dateFormat',function(originVal){
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth()+1+'').padStart(2,'0')
  const d = (dt.getDate()+'').padStart(2,'0')

  const hh = (dt.getHours()+'').padStart(2,'0')
  const mm = (dt.getMinutes()+'').padStart(2,'0')
  const ss = (dt.getSeconds()+'').padStart(2,'0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

然後打開public/index.html添加外部cdn引入代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>電商後臺管理系統</title>

    <!-- nprogress 的樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本編輯器 的樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本編輯器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

定製首頁內容

開發環境的首頁和發佈環境的首頁展示內容的形式有所不同
如開發環境中使用的是import加載第三方包，而發佈環境則是使用CDN，那麼首頁也需根據環境不同來進行不同的實現,我們可以通過插件的方式來定製首頁內容，打開vue.config.js，編寫代碼如下：

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加參數isProd
                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=>{
                //添加參數isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然後在public/index.html中使用插件判斷是否爲發佈環境並定製首頁內容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商後臺管理系統</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>

路由懶加載

當路由被訪問時才加載對應的路由文件，就是路由懶加載。

路由懶加載實現步驟：

安裝 @babel/plugin-syntax-dynamic-import
打開vue控制檯，點擊依賴->安裝依賴->開發依賴->搜索@babel/plugin-syntax-dynamic-import
點擊安裝。
在babel.config.js中聲明該插件，打開babel.config.js

//項目發佈階段需要用到的babel插件
const productPlugins = []

//判斷是開發還是發佈階段
if(process.env.NODE_ENV === 'production'){
  //發佈階段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懶加載插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

將路由更改爲按需加載的形式，打開router.js，更改引入組件代碼如下：

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

項目上線

通過node創建服務器

在vue_shop同級創建一個文件夾vue_shop_server存放node服務器
使用終端打開vue_shop_server文件夾，輸入命令 npm init -y
初始化包之後，輸入命令 npm i express -S
打開vue_shop目錄，複製dist文件夾，粘貼到vue_shop_server中
在vue_shop_server文件夾中創建app.js文件,編寫代碼如下：

const express = require('express')
//創建web服務器
const app = express()
//託管靜態資源
app.use(express.static('./dist'))
//啓動web服務器
app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

然後再次在終端中輸入 node app.js

開啓gzip壓縮

打開vue_shop_server文件夾的終端，輸入命令：npm i compression -D
打開app.js,編寫代碼：

const express = require('express')
//導入包
const compression = require('compression')

const app = express()
//啓用中間件
app.use(compression())
app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

配置https服務

配置https服務一般是後臺進行處理，前端開發人員瞭解即可。
首先，需要申請SSL證書，進入https://freessl.cn官網
在後臺導入證書，打開今天資料/素材，複製素材中的兩個文件到vue_shop_server中
打開app.js文件，編寫代碼導入證書，並開啓https服務

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//創建配置對象設置公鑰和私鑰
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8998,()=>{
//     console.log("server running at http://127.0.0.1:8998")
// })

//啓動https服務
https.createServer(options,app).listen(443)

注意：因爲我們使用的證書有問題，所以無法正常使用https服務

使用pm2管理應用

關閉終端窗口還可以運行項目
打開vue_shop_server文件夾的終端，輸入命令：npm i pm2 -g
使用pm2啓動項目，在終端中輸入命令：pm2 start app.js --name 自定義名稱
查看項目列表命令：pm2 ls
重啓項目：pm2 restart 自定義名稱
停止項目：pm2 stop 自定義名稱
刪除項目：pm2 delete 自定義名稱

項目優化和發佈

項目優化

根據報錯修改代碼

執行build

生成打包報告

6.修改webpack的默認配置

加載外部CDN

定製首頁內容

路由懶加載

項目上線

開啓gzip壓縮

配置https服務

使用pm2管理應用

關於遊戲付費的一點想法

我通過CKA和CKS啦！

Vuex複習

flex佈局應用

CORS和JSONP

瀏覽器與進程和線程

瀏覽器繪製過程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結