vue-项目完成的项目报告

项目优化

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）。为了将项目的开发过程和发布过程分离，我们可以采取两种模式，各自指定打包入口的文件：

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

4.configureWebpack和chainWebpack

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

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

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

module.exports={
		chainWebpack: config=>{
	        //开发模式的入口为main-prod
			config.when(process.env.NODE_ENV === 'production', config=>{
				config.entry('app').clear().add('./src/main-prod.js')
			})
	        //发布模式的入口为main-dev
			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中的第三方依赖包，都不会被打包
• 通过external加载外部的CDN资源【目的减小打包体积】

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

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

 
    <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" />
     
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" />
    

    
    <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>
    
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js">script>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js">
    script>
    
    <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证书

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

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

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