上线

用户9868475547530
84 阅读4分钟

项目优化上线

使用vue图形化管理工具
vue ui
进入项目仪表盘 导入打包后的项目文件
插件
依赖 配置 任务
serve 编辑和热更新（用于开发环境）
build 编译并压缩 （用于生产环境）
report 编译并压缩 （用于生产环境）

生成打包报告

通过vue-cli的命令选项可以生成打包报告
report选项可以生成report.html以帮助分析打包内容 在packjack.json 调试 scripts下面
"report": "vue-cli-service build --report"

ElementUI组件按需加载

  • 在main-prod.js（生产环境）中，注释掉element-ui按需加载的代码
  • 在index.html的头部区域中，通过CDN加载element-ui的js和css样式
  • 在main-dev.js（开发环境）中，注释掉element-ui按需加载的代码
  • 在index.html的头部区域中，通过CDN加载element-ui的js和css样式
  • 替换原有的main.js 入口文件

修改打包入口文件

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

configureWebpack和chainWebpack，来自定义webpack的打包配置

configureWebpack和chainWebpack的作用完全相同

  • configureWebpack：通过操作对象的形式来修改入口文件
  • chainWebpack：通过链式编程的形式来修改入口文件
    /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");
    });
  },
}

-------注意-------
congig.js里面 开发环境
代理服务器可以用
生产环境（上线后）代理服务器就不可用

修改index.html文件

设置变量isProd

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

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

/vue.config.js

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

使用变量isProd

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

/public/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.staticfile----------                 
<% if(htmlWebpackPlugin.options.isProd){ %>
      <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
      <script src="https://cdn.staticfile.org/vue/2.5.22/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>
  
      <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">
      <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.js"></script>
      <% } %>

第三方依赖启用CDN

/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.set("externals", {
        vue: "vue",
        "vue-router": "VueRouter",
        axios: "axios",
        lodash: "_",
        echarts: "echarts",
        nprogress: "NProgress",
        "vue-quill-editor": "VueQuillEditor"
      });
    });
    config.when(process.env.NODE_ENV == "development", (config) => {
      config.entry("app").clear().add("./src/main-dev.js");
    });
  },
}

使用外部资源（externals）时 config.set("externals)设置外部资源时
keys 不能更改 value可以更改 和import引用依赖时的名字要一致
-------使用外部文件引入----------- -----cdn链接在/public/index.html------

<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.12/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js">i</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>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.min.js"></script>

路由懒加载

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

具体需要三步：

  1. 安装 @babel/plugin-syntax-dynamic-import包
  2. 在babel.config.js配置文件中声明该插件
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [...proPlugin,'@babel/plugin-syntax-dynamic-import'],
}
  1. 将路由改为按需加载的形式，示例代码如下：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

开启gzip压缩

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

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

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

先创建一个文件夹 app.js 然后把打包好的项目文件夹 dist拖拽进来 node app.js 启动node服务器命令 npm init -y 初始化node
安装两个依赖 npm install compression npm install express

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

-------### 批量移除console.log-------
生产环境不能使用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], };

-----vscode格式化不换行-----
新建文件.prettierrc

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



------### 用Nprogress 进度条----

-   使用Nprogress

npm install --save nprogress


-   使用依赖

在请求拦截器中显示进度条 `Nprogress.start()`

在响应拦截器中隐藏进度条 `Nprogress.done();`

/src/utils/request.js

//引入依赖 import Nprogress from "nprogress"; import "nprogress/nprogress.css"; instance.interceptors.request.use( function (config) { //显示进度条 Nprogress.start(); ... }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( function (response) { //隐藏进度条 Nprogress.done(); ... }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); } );

avatar
文章
阅读
粉丝