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'})// 使用插件，添加参数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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/865305.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32远程烧录程序

STM32远程烧录程序

目录 简介 不同的程序下载方式 ICP&#xff1a;In-Circuit Programming ISP&#xff1a;In-System Programing IAP&#xff1a;In-Application Programming BootLoader Bootloader 是什么&#xff1f; STM32的启动方式 存储器组织 存储器映像 嵌入式SRAM 嵌入式FL…
阅读更多...
不同行业如何选择适合自己行业的项目管理工具？

不同行业如何选择适合自己行业的项目管理工具？

在当今的信息化时代&#xff0c;项目管理软件已成为各行各业不可或缺的工具。然而&#xff0c;由于各行业具有不同的特点和需求&#xff0c;因此选择合适的项目管理软件成为了一个重要问题。本文将探讨不同行业在选择项目管理软件时需要考虑的因素&#xff0c;希望能帮助大家更…
阅读更多...
vue实现一个简单的审批绘制功能

vue实现一个简单的审批绘制功能

1、vue代码 <div class"approval"><div class"approval_ul" v-for"(item,key) in approvalList" :key"key"><div><el-radio-group v-model"item.jointlySign"><el-radio label"1">…
阅读更多...
【超全详解】耳机怎么清理？手把手教你清洁各种耳机！

【超全详解】耳机怎么清理？手把手教你清洁各种耳机！

平时听歌、听书、打电话耳机往往有时候几个小时都戴着&#xff0c;时间久了难免会堆积污垢堵孔。这可能就会造成耳机左右音量不一致、声音小、降噪效果变差、嗡嗡声等问题&#xff0c; 而且耳机用久了如果不及时清理&#xff0c;可能导致耳朵感染细菌&#xff0c;严重的话会影响…
阅读更多...
学习React hook API

学习React hook API

React hook API useEffect&#xff08;异步执行&#xff09;useLayoutEffect&#xff08;同步执行&#xff09; useEffect&#xff08;异步执行&#xff09; useEffect: 是在浏览器完成绘制后异步执行的; 所以如果你在 useEffect 中改变了 DOM&#xff0c;可能会造成用户看到的…
阅读更多...
使用Random.next生成随机数

使用Random.next生成随机数

使用Random.next生成随机数 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨在Java中如何使用 Random.next 方法生成随机数。随机数在编程中应用广…
阅读更多...
谈谈JVM内存区域的划分，哪些区域可能发生OutOfMemoryError?(jvm)

谈谈JVM内存区域的划分，哪些区域可能发生OutOfMemoryError?(jvm)

Java 虚拟机&#xff08;JVM&#xff09;在运行时将内存划分为多个区域&#xff0c;以便有效管理和分配内存资源。这些内存区域包括堆&#xff08;Heap&#xff09;、方法区&#xff08;Method Area&#xff09;、程序计数器&#xff08;Program Counter Register&#xff09;、…
阅读更多...
计算机大方向的就业选择

计算机大方向的就业选择

选专业要了解自己的兴趣所在。 即想要学习什么样的专业&#xff0c;如果有明确的专业意向&#xff0c;就可以有针对性地选择那些专业实力较强的院校。 2.如果没有明确的专业意向&#xff0c;可以优先考虑一下院校。 确定一下自己想要选择综合性院校还是理工类院校或是像财经或者…
阅读更多...
亚马逊测评策略全攻略：详析各方案优势与局限，你精通了吗？

亚马逊测评策略全攻略：详析各方案优势与局限，你精通了吗？

亚马逊测评&#xff0c;一个绕不开的话题。不管是对于新手卖家还是资深卖家来说&#xff0c;它都是提升产品销量和排名的有效手段之一。接下来&#xff0c;我将为大家详细解析亚马逊测评的各种方式和注意事项。 一、精准筛选真人测评资源 在寻找真人测评资源时&#xff0c;许多…
阅读更多...
难道 Java 已经过时了？

难道 Java 已经过时了？

当一门技术已经存在许多年了&#xff0c;它可能会失去竞争力&#xff0c;而后黯然退场&#xff0c;默默地离开&#xff0c;这对大部分的人来说就已经算是过时了。 Java 于 1995 年正式上线&#xff0c;至今已经走过了 27 个年头&#xff0c;在众多编程技术里算是年龄比较大的语…
阅读更多...
数据结构----栈和队列之队列的实现

数据结构----栈和队列之队列的实现

目录 1.基本概况 2.队列组成 3.队列的实现 &#xff08;1&#xff09;队列的初始化 &#xff08;2&#xff09;队列的销毁 &#xff08;3&#xff09;队列的尾插 &#xff08;4&#xff09;队列的头删 &#xff08;5&#xff09;队列的判空 &#xff08;6&#xff09;队…
阅读更多...
Java项目总结1

Java项目总结1

1.什么是面向对象&#xff08;此对象非彼对象&#xff09; “面向对象的方法主要是把事物给对象化&#xff0c;包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程&#xff0c;面向过程抽象成类&#xff0c;然后封装&#xff0c;方便使用…
阅读更多...
外挂级OCR神器：免费文档解析、表格识别、手写识别、古籍识别、PDF转Word

外挂级OCR神器：免费文档解析、表格识别、手写识别、古籍识别、PDF转Word

智能文档解析&#xff1a;大模型友好的文档解析工具 PDF转Markdown 支持将任意格式的文件&#xff08;图片、PDF、Doc&#xff0f;Docx、网页等&#xff09;解析为Markdown或Json格式&#xff0c;以对LLM友好的方式呈现。 更高速度&#xff1a;100页PDF最快1.5s完成解析 更大…
阅读更多...
SAR目标检测

SAR目标检测

Multi-Stage with Filter Augmentation 多阶段滤波器增强(MSFA) 对SAR合成孔径雷达目标检测性能的改善 MSFA ON SAR 传统方法: 预训练:传统方法开始于在通用数据集上预训练一个基础模型。 微调:这个预训练的模型会被微调以适应特定的SAR图像&#xff0c;试图缩小域间的差距 …
阅读更多...
selector实现按钮选中高亮效果原理

selector实现按钮选中高亮效果原理

<?xml version"1.0" encoding"utf-8"?> <selector xmlns:android"http://schemas.android.com/apk/res/android"> <item android:state_pressed"true" android:drawable"drawable/background_press…
阅读更多...
【Pytorch实用教程】如何在多个GPU上使用分布式数据并行进行训练模型

【Pytorch实用教程】如何在多个GPU上使用分布式数据并行进行训练模型

文章目录 1. 代码（可直接运行，含随机生成的训练数据）2. 代码的详细解释2.1. 导入必要的库和模块2.2. 设置每个进程的初始设置2.3. 随机生成数据集类 `RandomDataset`2.4. 训练函数 `train`1. 代码（可直接运行，含随机生成的训练数据） 以下是一个基于PyTorch的多GPU分布式…
阅读更多...
【JAVA多线程】JDK中的各种锁，看这一篇就够了

【JAVA多线程】JDK中的各种锁，看这一篇就够了

目录 1.概论 1.1.实现锁的要素 1.2.阻塞队列 1.3.Lock接口和Sync类 2.各种锁 2.1.互斥锁 2.1.1.概论 2.1.2.源码 1.lock() 2.unlock() 2.2.读写锁 2.3.Condition 2.3.1.概论 2.3.2.底层实现 1.概论 1.1.实现锁的要素 JAVA中的锁都是可重入的锁&#xff0c;因为…
阅读更多...
PHP 使用RabbitMq推送消息

PHP 使用RabbitMq推送消息

use PhpAmqpLib\Connection\AMQPStreamConnection; use PhpAmqpLib\Message\AMQPMessage;config.php 文件 "order_dispose" > ["routingKey" > "xxx","name" > "xxx",//"class" > \app\rmq\pull\xxx…
阅读更多...
苹果再出新招：macOS15 Beta2预览版更新，居然还有iPhone镜像功能

苹果再出新招：macOS15 Beta2预览版更新，居然还有iPhone镜像功能

在数字化时代&#xff0c;操作系统的更新迭代是技术进步的显著标志。苹果公司以其一贯的创新精神&#xff0c;不断推动着个人计算体验的边界。 2024年6月25日&#xff0c;苹果公司向Mac电脑用户推出了macOS 15开发者预览版Beta 2更新&#xff0c;这不仅是对macOS系统的一次重大…
阅读更多...
logback janinoEventEvaluator expression 实例

logback janinoEventEvaluator expression 实例

参考&#xff1a;logback 日志 mysql logback 日志过滤_mob64ca140d2323的技术博客_51CTO博客 <!-- 控制台日志配置 --><appender name"CONSOLE" class"ch.qos.logback.core.ConsoleAppender"><filter class"ch.qos.logback.core.fil…
阅读更多...
最新文章

Copyright @ 2022~2023