一.项目优化

• 目的：减少打包后的文件大小，提高用户体验

1. 生成打包报告

1. 通过 vue-cli 的命令选项可以生成打包报告
2. 在package.json配置项内使用--report 选项可以生成 report.html 以帮助分析包内容，在浏览器内   打开可以清楚的看到各个插件的大小，

2. vue ui

1.使用 vue ui 打开图形化管理工具可以实时观测到打包文件的空间占比，可按照占比量来对项目进行优化

3. 优化 ElementUI

1. 目的：使 ElementUI组件按需加载，减少空间占比
2. 具体操作：
    1. 将mine.js分成开发环境（main-dev.js）和生产环境（main-prod.js）,将生产环境（main-  prod.js）中，注释掉element-ui按需加载的代码
    2. 修改打包入口文件  
        1.vue.config.js文件，用来修改webpack的配置项
        2.configureWebpack和chainWebpack，来自定义webpack的打包配置
        3.configureWebpack：通过操作对象的形式来修改入口文件
        4.chainWebpack：通过链式编程的形式来修改入口文件
    3. 代码，区分开发模式和生产模式
        //生产模式
        config.when(process.env.NODE_ENV == "production", (config) => {
          config.entry("app").clear().add("./src/main-prod.js");
        //设置一个全局变量，在index.html中用来区分生产环境和开发环境
          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;
      });
    });

4.第三方依赖启用CDN

• 例：<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
• CDN依赖官网：www.bootcdn.cn/

5.路由懒加载

• 安装 @babel/plugin-syntax-dynamic-import包，使用后会生成babel.config.js配置文件
• 在babel.config.js配置文件中声明该插件

     module.exports = {
       presets: ['@vue/cli-plugin-babel/preset'],
       plugins: [...proPlugin,'@babel/plugin-syntax-dynamic-import'],
     }  ```
  

6.开启gzip压缩

• 目的：使用gzip减少文件体积，使传输速度更快
• npm i compression -D

const express=require("express")
const compression=require("compression")
const app=express()

app.use(compression())      				//这个在前
app.use(express.static('./dist'))		//这个在后

app.listen(80,()=>{
 console.log("正在运行3000")
})

二. 项目打包

• npm run build 使用npm命令对vue进行打包，生成dist文件夹

1.上传服务器

• 打开宝塔面板，新建站点，将打包好的文件放入新创建的站点文件夹内，并在配置服务器代理跨域

   location /api {    # 会将接口地址/api开头的全部替换文下边配置的地址
       proxy_pass https://www.thenewstep.cn/v1/vue3system/api;            #接口服务地址
   }

三. 遇到的问题

• 域名解析问题：
  • 设置域名解析为泛解析，或直接指定解析名
• 端口号不一致
  • 设置的项目端口号与gzip压缩时的端口不一样