代码下载
打包发布服务代码下载
项目优化
- 生成打包报告,根据报告优化项目
- 第三方库启用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' // 没有控制台输出
此配置。
生成打包报告
- 命令行形式生成打包报告
vue-cli-service build --report
- 在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'})// 使用插件,添加参数isProdconfig.plugin('html').tap(arg => {arg[0].isProd = truereturn arg})})// 开发模式config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')// 使用插件,添加参数isProdconfig.plugin('html').tap(arg => {arg[0].isProd = falsereturn 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