2020 零基础到快速开发 Vue全家桶开发电商管理系统（十）

最新推荐文章于 2022-09-10 16:59:48 发布

Miracle5220

最新推荐文章于 2022-09-10 16:59:48 发布

阅读量246

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/Miracle5220/article/details/110798364

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

项目优化与部署上线(优化)

项目优化

项目优化的策略

生成打包报告
第三方库启用CDN
Element UI组件按需加载
路由懒加载
首页内容定制

1 优化——通过nprogress添加进度条效果

npm install --save nprogress

在main.js进行导入与配置
在这里插入图片描述

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL = 'http://119.23.53.78:8888/api/private/v1'
// axios请求拦截
axios.interceptors.request.use(config => {
  // console.log(config);
  // 在request拦截器中，展示进度条 NProgress.start()
  NProgress.start()
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  //在最后必须return config(固定写法)
  return config;
})
// 在response拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

2 优化——解决serve命令中提示的ESLint语法错误

//.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 200
}

3 优化——只在发布阶段移除所有的console

在执行build命令期间移除所有的console
在这里插入图片描述
在plugins里面新增一个transform-remove-console插件即可
在babel.config.js文件中进行修改：

上一步存在一个问题，因为不管是开发测试还是发布它都会生效，可能会影响我们开发时的调试，所以我们希望是只在发布阶段移除所有的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
  ]
}

4 优化——生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：
1.通过命令行参数的形式生成报告

// 通过 vue-cli 的命令选项可以生成打包报告   
// --report 选项可以生成 report.html 以帮助分析包内容  
 vue-cli-service build --report

2.通过可视化的UI面板直接查看报告（推荐）
在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。
在这里插入图片描述

5 优化——通过 chainWebpack 自定义打包入口

通过 vue.config.js 修改 webpack 的默认配置
在这里插入图片描述
为开发模式与发布模式指定不同的打包入口
首先，我们需要将原本的main.js文件重命名为 main-dev.js 然后拷贝一份，形成这两个文件，便于我们后面进行打包入口的分离

//vue.config.js
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')
   })
 } 
}

6 优化—— 通过 externals 加载外部 CDN 资源

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。

//vue.config.js
在这里插入图片描述

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

在这里插入图片描述

	<!-- 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" /> 
    <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/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

7 优化——通过 CDN 优化 ElementUI 的打包

① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
② 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式
在这里插入图片描述

在这里插入图片描述

<!-- element-ui 的样式表文件 --> 
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> 
<!-- element-ui 的 js 文件 --> 
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

8 优化——首页内容定制

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
	      config.plugin('html').tap(args => {
             args[0].isProd = true
             return args
      })
	})   
   // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
	     config.plugin('html').tap(args => {
            args[0].isProd = false
            return args
       })
	}) 
}

在 public/index.html 首页中，可以根据 isProd 的值，来决定如何渲染页面结构：

<!-- 按需渲染页面的标题 --> 
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title> 
 
<!-- 按需加载外部的 CDN 资源 -->
 <% if(htmlWebpackPlugin.options.isProd) { %>
 <!--通过 externals 加载的外部 CDN 资源-->
<% } %>

9 优化——实现路由懒加载

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要 3 步：
① 安装 @babel/plugin-syntax-dynamic-import 包。
② 在 babel.config.js 配置文件中声明该插件。
③ 将路由改为按需加载的形式，示例代码如下：
在这里插入图片描述

项目优化与部署上线(上线)

部署上线

项目上线相关配置

通过 node 创建 web 服务器。
开启 gzip 配置。
配置 https 服务。
使用 pm2 管理应用。

1 上线——通过node创建Web服务器

创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，
托管为静态资源即可关键代码如下：

const express = require('express') 
// 创建 web 服务器 
const app = express() 
// 托管静态资源 
app.use(express.static('./dist'))  
// 启动 web 服务器 
app.listen(80, () => { 
  console.log('web server running at http://127.0.0.1') 
})

创建一个新的空文件夹，然后用vscode或者其他工具打开
在这里插入图片描述
在终端内输入如下指令，初始化一个包管理配置文件

npm init -y

然后，安装第三方express包

npm install express -S

然后将我们之前优化好的vue_shop里新生成的dist文件夹拷贝一份到vue_shop_server里去，此时里面包含这些文件
在这里插入图片描述

在这里插入图片描述
测试是否成功

node .\app.js

在这里插入图片描述
然后地址栏输入127.0.0.1就能进入我们的项目登录界面了！

2 上线—— 开启 gzip 配置

① 使用 gzip 可以减小文件体积，使传输速度更快。
② 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

 // 安装相应包   
 npm install compression -S

 // 导入包   
 const compression = require('compression');   
 // 启用中间件   
 app.use(compression());

在这里插入图片描述
node .\app.js 重启

3 上线——配置 HTTPS 服务

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

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

在后台项目中导入证书

  const https = require('https'); 
  const fs = require('fs'); 
  const options = { 
      cert: fs.readFileSync('./full_chain.pem'), 
      key: fs.readFileSync('./private.key') 
  } 
  https.createServer(options, app).listen(443)

在这里插入图片描述

4 上线——使用 pm2 管理应用

现在项目只有终端开着才能正常运行
pm2可以不用再一直打开终端窗口了，终端关掉pm2会在后台帮我们运行这个项目。
①在服务器中安装 pm2：npm i pm2 -g
② 启动项目：pm2 start 脚本 --name 自定义名称
③ 查看运行项目：pm2 ls
④ 重启项目：pm2 restart 自定义名称
⑤ 停止项目：pm2 stop 自定义名称
⑥ 删除项目：pm2 delete 自定义名称
在这里插入图片描述
会显示

Miracle5220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020 零基础到快速开发 Vue全家桶开发电商管理系统（十）

项目优化与部署上线(优化)项目优化项目优化的策略生成打包报告第三方库启用CDNElement UI组件按需加载路由懒加载首页内容定制1 优化——通过nprogress添加进度条效果npm install --save nprogress在main.js进行导入与配置// 导入 NProgress 包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'import axios f
复制链接

扫一扫