项目打包上线

可以使用命令行

npm run build

也可以通过指令打开图形化界面（vue自带的不需要下载插件）可以在这里面进行运行打包

vue ui

这个里面还可以查看下载的插件也可以自己手动搜索插件和下载

依赖也一样

最后来到工作台这里

生成打包报告

命令

vue-cli-service build --report

找到项目文件里的package.json添加命令

打开vue-ui看到出现report点击运行等Sealing转满

再回到Visual Studio Code dist文件下面js文件夹里面有没有出现report.html出现就生成报告成功

右键浏览器打开report.html页面

优化element-ui

按需引入:用哪个引入那个

可以通过www.bootcdn.cn/ 来引入依赖

引入一个js和css文件推荐第一个和最后一个放在public里面的index.html里面

记得把全部引入注释

修改打包入口文件

vue.config.js文件，用来修改webpack的配置项

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");
    });
  },
}

configureWebpack：通过操作对象的形式来修改入口文件

3. ### 修改index.html文件

在开发环境下，通过import来引入依赖。
在生产环境下，不使用import引入依赖，而是通过cdn来引入各种依赖，这样可以减小打包后依赖的体积。使用变量isProd通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不接在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;
      });
    });
  },
});

在index.html中引入外部依赖

<% if(htmlWebpackPlugin.options.isProd){%>
 <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
 <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet">
 <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>

 <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/esm/axios.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.prod.min.js"></script>

<% } %>

第三方依赖启用CDN 在vue.config.js

路由懒加载

当打包创建项目时候，js包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要三步
安装 npm i @babel/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件
将路由改为按需加载的形式，示例代码如下：
注意：webpackChunkName:'名字必须一致' 回合成一个文件夹