上线

项目完成之后，在终端输入 npm run build 打包命令，在项目根目录会生成一个dist文件夹，这文件夹里存放着我们已经打包好的项目

在宝塔后台添加站点

添加站点.png 域名是自己的注册好的域名或者是IP 提交完成会生成一个网站文件目录

点击文件根目录将已经打包好的dist文件夹上传上去

上传.png 上传成功，点击进入网络名配置代理

进入.png 在配置文件中设置代理代理.png

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

配置完成后项目上线成功

项目优化上线

由于打包上传的项目过大，为了使项目体积更小更快捷我们对项目进行优化

使用vue图形化管理工具

vue ui

开发.png

生产.png

生成打包报告

//通过 vue-cli 的命令选项可以生成打包报告

// --report 选项可以生成 report.html 以帮助分析包内容

vue-cli-service build --report

ElementUI组件按需加载

按需引入element-ui组件
在vue项目scr路径下面创建两个main.js入口文件一个是在开发环境下使用一个是在项目上线时候使用
main-dev.js 开发环境
main-prod.js 上线环境
在main-prod.js中，注释掉element-ui按需加载的代码
在index.html的头部区域中，通过CDN加载element-ui的js和css样式

注释.png

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

修改打包入口文件

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

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

configureWebpack和chainWebpack的作用完全相同

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

设置变量isProd

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

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

第三方依赖启用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");
      //使用外都文件资源文件
        config.set("externals", {
          vue: "vue",
          "vue-router": "VueRouter",
          axios: "axios",
          lodash: "_",
          echarts: "echarts",
          nprogress: "NProgress",
          "vue-quill-editor": "VueQuillEditor"
        });
      });
    	//设置一个全局变量，在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通过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>

<% } %>

cdn链接

<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包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要三步：

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

let proPlugin=[]
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')

使用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);  } );

vscode格式化不换行

有时候我们在格式化时代码会自动换行，用以下代码设置代码换行长度

/.prettierrc

{
  "semi":false,
  "singleQuote":true,
  "printWidth":200 //代码长度换行
}

批量移除console.log

在项目完成后但是项目残留的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],
};

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

项目上线流程以及优化

上线