项目上线打包优化流程 总结！！！

项目打包

配置webpack

1. 在package.json文件的scripts节点下，新增build命令如下:

注意:通过–model指定的参数项，会覆盖webpack.config.js 中的model选项。

2 在vscode终端输入dir 显示当前打包文件目录

3 在输入npm run build 生成一个dist文件夹

4 在宝塔linux面板网站创建一个自己的站点 ，名称地址根据自己的需要来起, 然后将生成dist内的文件复制到 创建的站点中 双击根目录会进入到该目录文件中 将dist中的文件拉取到此。

5双击此站点 在配置文件选项打开

  如下图所示：
   location /api/{
   proxy_pass "代理配置路径"

}

6 点击保存 将站点状态重启

7 浏览器打开配置好的

下面是流程图

项目优化

1 使用vscode终端 在当前打包项目文件夹下运行 vue ui 会在浏览器打开 vue 项目管理器

2 导入 进入当前的项目 点击第四个选项 进入任务 如下图

3 点击 serve运行此项目 运行成功 依次点击build 运行成功

4 在dist index.html文件夹script配置 "report"

5 点击运行report 会生成一个report.html

6 优化element-ui浏览器搜索

7 复制链接 在index.html引入

8 修改打包入口文件 vue.config.js引入

module.exports={
  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");
   });
 },
}

9 ##### 设置变量isProd

在开发环境下，通过import来引入依赖。

在生产环境下，不使用import引入依赖，而是通过cdn来引入各种依赖，这样可以减小打包后依赖的体积。

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({

  chainWebpack: (config) => {
    //生产模式
    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;
      });
    });
  },
});
```、

10##### 使用变量isProd

通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不接在CDN文件。

/public/index.html

```