项目优化

进度条加载效果

1
npm install --save nprogress
  • main.js中导入,并通过设置拦截器来调用方法。这样网页顶部就会有加载进度条
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import axios from 'axios'
// 导入NProgress对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 在 request 拦截器中,展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
NProgress.start()
return config
})
// 在 response 拦截器中,隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
NProgress.done()
return config
})

移除console

1
npm install babel-plugin-transform-remove-console --save-dev
  • babel.config.js配置文件中配置
1
2
3
4
5
module.exports = {
plugins: [
'transform-remove-console'
]
}
  • 但是实际开发中需要使用console.log()语句,需要只在项目发布阶段移除
1
2
3
4
5
6
7
8
9
10
11
12
13
// 发布阶段需要使用的babel插件
const prodPlugins = []
// 处于产品发布模式
if(process.env.NODE_ENV === 'production'){
// 添加插件
prodPlugins.push('transform-remove-console')
}
module.exports = {
plugins: [
// 发布产品时候的插件数组 ...为展开运算符,数组内容展开赋给一个新数组
...prodPlugins
]
}

生成打包报告

  • 打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种
  • 通过命令行参数的形式生成报告
1
2
3
# 通过vue-cli的命令选项可以生成打包报告
# --report选项可以生成report.html以帮助分析包内容
vue-cli-service build -- report
  • 通过可视化的UI面板直接查看报告:在可视化的UI面板中,通过控制台和分析面板,可以方便地看到项目中所存在的问题。

chainWebpack

  • 默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:
    • 开发模式的入口文件为src/main-dev.js
    • 发布模式的入口文件为src/main-prod.js
  • vue.config.js导出的配置对象中,新增configureWebpackchainWebpack节点,来自定义webpack的打包配置
  • 在这里,configureWebpackchainWebpack的作用相同,唯一的区别就是它们修改webpack配置的方式不同
    • chainWebpack通过链式编程的形式,来修改默认的webpack配置
    • configureWebpack通过操作对象的形式,来修改默认的webpack配置
  • 复制main.js的内容并创建main-prod.jsmain-dev.js文件,删除main.js
1
2
3
4
5
6
7
8
9
10
11
12
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
lintOnSave: false,
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production',config => {
config.entry('app').clear().add('./src/main-prod.js')
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
})
})
},
}
  • public/index.html首页中,可以根据isProd的值,来决定如何渲染页面结构。比如如果是开发环境,网页标题显示dev - 电商后台管理系统
1
2
3
4
<title>
<%= htmlWebpackPlugin.options.isProd ? '' : 'dev -' %>
电商后台管理系统
</title>

  • 也可以用于渲染在线CDN,比如发布模式使用在线CDN
1
2
3
<% if(htmlWebpackPlugin.options.isProd) { %>
<!--包裹在线CDN链接-->
<% } %>

路由懒加载

  • 当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
  • 参考官方文档:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
  • 首先安装@babel/plugin-syntax-dynamic-import
1
npm install --save-dev @babel/plugin-syntax-dynamic-import
  • babel.config.js配置文件中声明该插件
1
2
3
4
5
module.exports = {
plugins: [
'@babel/plugin-syntax-dynamic-import'
]
}
  • 在路由配置文件中将路由改为按需加载的形式,示例代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 原始导入
import Login from '../components/Login'
import Home from '../components/Home'
import Welcome from '../components/Welcome'

import Users from '../components/user/Users'
import Rights from '../components/power/Rights'
import Roles from '../components/power/Roles'

import Categories from '../components/goods/Categories'
import Params from '../components/goods/Params'

import Goods from '../components/goods/Goods'
import Add from '../components/goods/Add'

import Order from '../components/order/Order'
import Report from '../components/report/Report'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 分组login_home_welcome
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome')

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

const Categories = () => import(/* webpackChunkName: "Categories_Params" */ '../components/goods/Categories')
const Params = () => import(/* webpackChunkName: "Categories_Params" */ '../components/goods/Params')

const Goods = () => import(/* webpackChunkName: "Goods_Add" */ '../components/goods/Goods')
const Add = () => import(/* webpackChunkName: "Goods_Add" */ '../components/goods/Add')

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

项目上线

创建服务器

  • 创建node项目,并安装express,通过express快速创建web服务器,将vue打包生成的dist文件夹,托管为静态资源即可
  • 创建server文件夹,运行以下命令
1
2
npm init
npm i express -S
  • 然后把Vue项目Build出的dist文件夹复制到服务器项目目录下,并将dist命名为static,创建vue_server.js文件,内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
//1. 引入Express和history
const express = require('express');

//2. 创建应用对象
const app = express();

// 部署静态资源,指定静态资源文件夹
app.use(express.static(__dirname+'/static'))

//3. 监听端口启动服务
app.listen(5000,()=>{
console.log("服务已经启动,5000 端口监听中...")
})
  • 然后启动服务器,访问端口即可
1
node vue_server.js

开启Gzip配置

  • 使用gzip可以减小文件体积,使传输速度更快。可以通过服务器端使用Express做gzip压缩
  • 首先安装相应的包
1
npm install compression -D
  • 然后在vue_server.js中导入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1. 引入Express和history
const express = require('express');
const compression = require('compression')

//2. 创建应用对象
const app = express();
// 中间件在静态资源之前使用
app.use(compression())

// 部署静态资源
app.use(express.static(__dirname+'/static'))

//3. 监听端口启动服务
app.listen(5000,()=>{
console.log("服务已经启动,5000 端口监听中...")
})

配置HTTPS服务

  • 传统的 HTTP协议传输的数据都是明文,不安全。采用HTTPS协议对传输的数据进行了加密处理,可以防止数据被中间人窃取,使用更安全
  • 需要申请SSL证书:https://freessl.org ,输入申请的域名并选择品牌。输入邮箱并选择相关选项
  • 验证DNS (在域名管理后台添加TXT记录)。验证通过之后,下载SSL证书( full_chain.pem公钥;private.key私钥)
1
2
3
4
5
6
7
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);