Vue2 基础九电商后台管理项目——下

代码下载

打包发布服务代码下载

项目优化

• 生成打包报告，根据报告优化项目
• 第三方库启用CDN
• Element-UI组件按需加载
• 路由懒加载
• 首页内容定制

添加进度条

给项目添加进度条效果，先打开项目控制台，打开依赖，安装 nprogress 打开main.js，编写如下代码：

// 导入 NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 请求拦截器，请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(function(config) {
  console.log('request: ', config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
// 响应拦截器
axios.interceptors.response.use(function(res) {
  console.log('response: ', res)
  NProgress.done()
  return res
})

根据报错修改代码

根据ESLint的警告提示更改对应的代码，在.prettierrc文件中更改设置 "printWidth":200, 将每行代码的文字数量更改为200：

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

处理生产环境 console 日志

安装一个插件 babel-plugin-transform-remove-console 在项目 build 阶段移除所有的console信息，打开项目控制台，点击依赖->开发依赖，输入 babel-plugin-transform-remove-console，安装。打开babel.config.js，编辑代码如下：

// 发布阶段需要用到发 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
  ] 
}

至此运行 build 打包，得到的目标文件中确实没有 console 日志输出，但是打包日志中依然有警告，若想消除此条警告可以在 .eslintrc.js 文件的 rule 中添加 'no-console': 'off' // 没有控制台输出 此配置。

生成打包报告

1. 命令行形式生成打包报告 vue-cli-service build --report
2. 在vue控制台生成打包报告，点击“任务”=>“build”=>“运行”，运行完毕之后就可以查看报告

修改webpack的默认配置

如果要配置webpack，需要通过vue.config.js来配置。

1、为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，可以为两种模式，各自指定打包的入口文件，即：

• 开发模式的入口文件为 src/main-dev.js
• 发布模式的入口文件为 src/main-prod.js

在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方式不同：

• chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置
• configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置

两者具体的使用差异可参考这里。

重命名 main.js 为 main-dev.js，并复制一份 main-dev.js 命名为 main-prod.js，在 vue.config.js 中通过 chainWebpack 自定义打包入口：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  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')
    })
  }
})

通过 externals 加载外部 CDN 资源

默认情况下，依赖项的所有第三方包都会被打包到 js/chunk-vendors.******.js 文件中，导致该js文件过大。那么可以通过 externals 排除这些包，使它们不被打包到 js/chunk-vendors.******.js 文件中，在 vue.config.js 中的发布模式下添加如下代码：

      // externals 节点中的第三方依赖包，都不会被打包
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：

    <!-- nprogress 样式表 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css">

    <!-- 富文本编辑器 样式表 -->
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.4/dist/quill.core.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.4/dist/quill.snow.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.4/dist/quill.bubble.min.css" rel="stylesheet">
    
    <!-- element-ui 样式表 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.4/quill.min.js"></script>
    <!-- Quill JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>

并且还得再 main-prod.js 文件中删除或注销如下的 element-ui 按需加载 和 css 加载的代码：

// 导入 element-ui
// import './plugins/element.js'

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// import 'quill/dist/quill.core.css' // import styles
// import 'quill/dist/quill.snow.css' // for snow theme
// import 'quill/dist/quill.bubble.css' // for bubble theme

// 导入 NProgress
import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'

注意：由于前面在 plugin/element 文件将 element-ui 中 Message 组件配置为 msg 属性了 Vue.prototype.$msg = Message，此时必须将其修改为 Vue.prototype.$message = Message， 并全局搜索 this.$msg 将其替换为 this.$message。

首页内容定制

开发环境的首页和发布环境的首页展示内容的形式有所不同。如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现，可以通过插件的方式来定制首页内容，首先打开vue.config.js，编写代码如下：

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // 入口函数
      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'
      })

      // 使用插件，添加参数isProd
      config.plugin('html').tap(arg => {
        arg[0].isProd = true
        return arg
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')

      // 使用插件，添加参数isProd
      config.plugin('html').tap(arg => {
        arg[0].isProd = false
        return arg
      })
    })
  }
})

然后在 public/index.html 中使用插件判断是否为发布环境并定制首页内容（标题和CDN加载项）：

    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev-'%>后台管理平台</title>

    <% if (htmlWebpackPlugin.options.isProd) { %>
    <!-- nprogress 样式表 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css">

    <!-- 富文本编辑器 样式表 -->
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.4/dist/quill.core.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.4/dist/quill.snow.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.4/dist/quill.bubble.min.css" rel="stylesheet">
    
    <!-- element-ui 样式表 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.4/quill.min.js"></script>
    <!-- Quill JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
    <% } %>

路由懒加载

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。具体需要 3 步：
1、安装 @babel/plugin-syntax-dynamic-import 包。打开vue控制台，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import
点击安装。

2、在 babel.config.js 配置文件中声明该插件：

// 发布阶段需要用到发 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'
      }
    ],
    '@babel/plugin-syntax-dynamic-import',
    // 发布产品时用到的插件数组
    ...prodPlugins
  ] 
}

3、将路由改为按需加载的形式，打开router.js，更改引入组件代码如下：

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'
const users = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/user/Users.vue')
// import rights from '../components/power/Rights.vue'
const rights = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Rights.vue')
// import roles from '../components/power/Roles.vue'
const roles = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Roles.vue')

// import cate from '../components/goods/Cate.vue'
const cate = () => import(/* webpackChunkName: "cate_params" */ '../components/goods/Cate.vue')
// import params from '../components/goods/Params.vue'
const params = () => import(/* webpackChunkName: "cate_params" */ '../components/goods/Params.vue')

// import goods from '../components/goods/List.vue'
const goods = () => import(/* webpackChunkName: "goods_add" */ '../components/goods/List.vue')
// import addGoods from '../components/goods/Add.vue'
const addGoods = () => import(/* webpackChunkName: "goods_add" */ '../components/goods/Add.vue')

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

关于路由懒加载的详细文档，可参考此链接。

项目上线

通过 node 创建 web 服务器

• 创建一个文件夹 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')
const app = express()

// 将打包的目录托管为静态资源
app.use(express.static('./dist'))

// 启动服务器
app.listen('8090', function() {
    console.log('express server running at http://127.0.0.1:8090')
})

开启 gzip 配置

使用 gzip 可以减小文件体积，使传输速度更快。

1、打开 vue_shop_server文件夹的终端，输入命令：npm i compression -D

2、可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

// 开启 gzip 一定要挂载在静态资源托管之前
const compression = require('compression')
app.use(compression())

配置 HTTPS 服务

传统的 HTTP 协议传输的数据都是明文，不安全；采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全。

申请 SSL 证书（申请地址）：

• 进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌。
• 输入自己的邮箱并选择相关选项。
• 验证 DNS（在域名管理后台添加 TXT 记录）。
• 验证通过之后，下载 SSL 证书（ full_chain.pem 公钥；private.key 私钥）。

在后台项目中导入证书，配置 HTTPS 服务：

const https = require('https')
const fs = require('fs')
// 读取公钥和私钥
const options = {
    cert: fs.readFile('./full_chain.pem'),
    ket: fs.readFile('./private.key')
}
// 启动 https 服务器
https.createServer(options, app).listen(443)

pm2 管理应用

安装 pm2，在终端执行如下命令安装 pm2：

npm i pm2 -g

使用 pm2，进入服务器项目目录（vue_shop_server）：

• 启动项目：pm2 start 脚本 --name 自定义名称
• 查看运行项目：pm2 ls
• 重启项目：pm2 restart 自定义名称/id
• 停止项目：pm2 stop 自定义名称/id
• 删除项目：pm2 delete 自定义名称/id