今天我们主要学习了项目的整个上线流程

1.@@@优化项目主要是为了让用户体验更好为了提高用户加载页面的速度

1.1通过vue ui命令打开vue项目管理器找到手中的项目然后点击任务里面的任务栏serve运行就能看到整个项目的大小

1.2按需引入element-ui组件

在vue项目scr路径下面创建两个main.js入口文件一个是在开发环境下使用一个是在项目上线时候使用

main-dev.js 开发环境
main-prod.js 上线环境
在main-prod.js中，注释掉element-ui按需加载的代码

在index.html的头部区域中，通过CDN加载element-ui的js和css样式

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

<% 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>

<% } %>

打开vue.config文件在理配置代码如下

    config.when(process.env.NODE_ENV === "production", (config) => {
      config.entry("app").clear().add("./src/main-prod.js");
      config.plugin("html").tap((args) => {
        args[0].isProd = true;
        return args;
      });
      // config.set("externals", {
      //   vue: "Vue",
      //   // "vue-router": "VueRouter",
      //   axios: "axios",
      //   // lodash: "_",
      //   // echarts: "echarts",
      //   // "vue-quill-editor": "VueQuillEditor"
      // });
    });
    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;
      });
    });

  }

1.3### 批量移除console.log

安装依赖： npm i babel-plugin-transform-remove-console --save-dev

使用插件：

babel.config.js

const proPlugins = [];
//如果是开发环境，则添加 transform-remove-console 插件
if (process.env.NODE_DEV == "production") {
  proPlugins.push("transform-remove-console");
}

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [...proPlugins],
};

1.4### 路由懒加载

当打包创建项目时候，js包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要三步：

安装 @babel/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件

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

将路由改为按需加载的形式，示例代码如下：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

1.5vscode格式化不换行

/.prettierrc

{
  "semi":false,
  "singleQuote":true,
  "printWidth":200
}

1.6开启gzip压缩

开启gzip压缩

使用gzip减少文件体积，使传输速度更快

可以通过服务器端使用express做gzip压缩，其配置如下：

服务器端安装包 npm i compression -D
导入包 const compression=require("compression");
启用中间件 app.use(compression())
/app.js

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

2.@@@项目上线流程

2.1打开vue ui输入命令vue run bulid

2.2打开宝塔面板创建node项目 3. 将项目中打包后的 dist 文件复制到我们的app.js同级文件夹中 4. 登录我们的宝塔服务器在文件里面新建一个文件夹放入 5. 在宝塔的安全里面添加端口与app.js中的端口对应 6. 在宝塔的网站里面新建Node项目如果没添加过按提示进行下载一下插件 7.

1.项目上线流程以及项目优化流程