文章目录

项目优化
- 1.生成打包报告
- 2.通过vue.config.js修改webpack的默认配置
- 3.为开发模式与发布模式指定不同的打包入口
- 4.configureWebpack和chainWebpack
- 5.通过chainWebpack自定义打包入口
- 6.通过externals加载外部的CDN资源
- 7.路由懒加载
项目上线相关配置
- 1.通过node创建web服务器【不一定非要node】
- 2.开启gzip配置
- 3.配置https服务【前端了解:http是明文的，传输密码这些的话不安全】
- 4.使用pm2管理应用【了解】

项目优化

1.生成打包报告

第一种方法:命令行【不推荐】
vue-cli-service bulid --report
第二种方式：vue的可视化UI面板直接查看【控制台输入 vue ui】
在ui面板中查看打包的项目，并且进行优化

2.通过vue.config.js修改webpack的默认配置

通过vue-cli 3.0工具生成的项目，默认是隐藏了webpack配置项的，目的是为了让工作中心放在业务逻辑上面
然后配置webpack

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

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

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

4.configureWebpack和chainWebpack

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

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

5.通过chainWebpack自定义打包入口

module.exports={chainWebpack: config=>{//开发模式的入口为main-prodconfig.when(process.env.NODE_ENV === 'production', config=>{config.entry('app').clear().add('./src/main-prod.js')})//发布模式的入口为main-devconfig.when(process.env.NODE_ENV === 'development', config=>{config.entry('app').clear().add('./src/main-dev.js')})}
}

6.通过externals加载外部的CDN资源

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

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

在index.html的文件的头部，添加资源引用【删除对应的引入的样式】

<!-- 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" /><!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" /><!-- <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.5.4/theme-chalk/index.css" /> --><!-- <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script> --><script src="https://cdn.staticfile.org/vue/2.6.3/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><!-- element-ui 的 js 文件【并且注释带引入elementui的import】 --><script src="https://cdn.staticfile.org/element-ui/2.15.1/index.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

7.路由懒加载

项目上线相关配置

1.通过node创建web服务器【不一定非要node】

创建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('server running at localhost:80')
})

2.开启gzip配置

使用gzip可以减小文件的体积，使得传输速度更快
可以通过服务端使用express做gzip压缩

 //安装相应包npm i compression//导入包const compression = require('compression')//启用中间件【一定要在托管静态资源之前】app.use(compression())

3.配置https服务【前端了解:http是明文的，传输密码这些的话不安全】

申请SSL证书

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

4.使用pm2管理应用【了解】

当我们用node创建的服务器，关闭命令窗口时，服务器也随之关闭，pm2就是解决这个的

vue-项目完成的项目报告相关推荐

vue项目查看构建后项目报告，项目个模块依赖占比比例情况
vue项目查看构建后项目报告,项目个模块依赖占比比例情况 npm run build --report or "report": "vue-cli-service bui ...
小学四则运算结对项目报告（GUI）
小学四则运算结对项目报告(GUI) 一．Coding.Net项目地址: https://git.coding.net/wsshr/Calculation.git 二．PSP表格(完成前): PSP 任 ...
基于java的雷电游戏系统设计与实现(项目报告+答辩PPT+源代码+部署视频)
项目报告基于Java的雷电游戏电脑游戏,是指在计算机上能够运转的游戏软件.这种软件具有较强的娱乐性.电脑游戏的创新和发展与硬件.软件的发展紧密相关.它能够给玩家提供一个虚拟的环境,使游戏带给了人们 ...
2022大作业项目报告
2022大作业项目报告项目名称:2022网络平台招聘信息汇总数据分析班级:大数据2002 专业:大数据技术与应用目录文章目录 2022大作业项目报告项目名称:2022网络平台招聘信息汇总数据 ...
基于java的连连看游戏系统设计与实现(项目报告+答辩PPT+源代码+数据库+截图+部署视频)
项目说明报告基于Java的连连看游戏设计与实现连连看是一种消除类益智游戏,核心要求是在规定的时间内,消除游戏界面中选中的两张相同的图案,直至完全消除所有图案.这款游戏操作简单(只需单击鼠标左键操作 ...
转：项目报告应该汇报什么内容?
项目报告应该汇报什么内容? 项目周报应该汇报什么内容? 这是所有项目经理都考虑的问题.但是这个问题没有正确的答案.一般来说,项目周报中需要汇报的内容取决于这样几个因素: 1.项目的规模: 2. ...
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
2016012101小学四则运算练习软件项目报告
2016012101小学四则运算练习软件项目报告 Coding.net源码仓库地址:https://git.coding.net/naiteu/sgwq.git 一.需求分析 1,程序可以接收一个参数 ...
安装vue脚手架创建项目
1.安装node.js [nodejs官网](https://nodejs.org/en/) 2.安装cnpm 到这里node的环境已经安装完了,npm包管理工具也有了,但是由于npm的有些资源被墙, ...
小学四则运算练习软件项目报告
小学四则运算练习软件项目报告作业源代码地址:https://git.coding.net/weijn/SiZe.git 一.需求分析程序可接收一个输入参数n,然后随机产生n道加减乘除练习题. 每个 ...

vue-项目完成的项目报告

文章目录

项目优化

1.生成打包报告

2.通过vue.config.js修改webpack的默认配置

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

4.configureWebpack和chainWebpack

5.通过chainWebpack自定义打包入口

6.通过externals加载外部的CDN资源

7.路由懒加载

项目上线相关配置

1.通过node创建web服务器【不一定非要node】

2.开启gzip配置

3.配置https服务【前端了解:http是明文的，传输密码这些的话不安全】

4.使用pm2管理应用【了解】

vue-项目完成的项目报告相关推荐

最新文章

热门文章