vue项目优化与部署上线

小魏每天都学习

已于 2022-05-14 11:23:32 修改

阅读量874

点赞数

分类专栏： vue 文章标签： vue.js javascript elementui

于 2022-05-13 19:38:27 首次发布

本文链接：https://blog.csdn.net/weixin_47417033/article/details/124716010

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue_shop项目的优化与上线

一、项目优化
二、部署上线
总结

本文对vue项目部署上线的一套流程做个小结，包括项目优化、项目上线两个部分，方便日后的学习与回顾
项目优化的内容一般包括：生成打包报告、开启第三方库CDN加载、elementui按需加载、路由懒加载、首页内容定制。

一些Bug与warning
（1）先说一个bug，本人卡了两天的bug。点击serve后，文件一直不能正常运行，terminated。原来是，vue.config.js文件中路径问题和压缩问题。vue.config.js中有自定义入口文件，外部externals加载CDN资源，和首页自定制。
（2）再说第二个Bug，当build后的文件仍然过大时，看右边的依赖文件大小，富文本编辑器的导入import和全局注册use都可以删掉
（3）再说第三个，编译时出现警告You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the时，在vue.config.js中添加一句：lintOnSave: false,即可

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目优化

1、页面顶部添加滚动条loading效果

安装nprogress 在依赖项面板中安装运行以来 nprogress
基于拦截器实现展示和隐藏进度条
在request拦截器中，展示 Nprogerss.start()
在response拦截器中，隐藏 Nprogress.done()

代码如下所示

// 1、导入Nprogress包对应的js  css
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 2、在request拦截器中展示进度条Nprogress.start()
axios.interceptors.request.use((config) => {
    Nprogress.start();
    
// 为请求的头字段添加Authorization字段,值为获取到的token令牌
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config;
})

// 3、在response拦截器中隐藏进度条Nprogress.done()
axios.interceptors.response.use((config) => {
    Nprogress.done();
    return config;
})

2、处理eslint语法错误警告

如 index scope定义了但没有使用的问题、小驼峰命名法等

3、build生成dist，处理按需移除console

搜索并安装依赖babel-plugin-transform-remove-console的教程
安装开发依赖 babel-plugin-transform-remove-console
在babel.config.js文件中，在plugins数组中，新增一项 'transform-remove-console'
在项目开发与发布阶段，对console有不同的需求，希望这个removeconsole只在发布阶段生效，在开发阶段依然有console
在babel中定义一个数组，默认是空的，用于存储一些开发阶段的特定插件 const prodPlugins = [ ]；
当process.env.NODE_ENV === ’production’时，说明处于发布阶段，此时往prodPlugins中push一个项 ‘transform-remove-console’
babel中代码如下

// 这是项目发布阶段需要用到的babel插件 
const prodPlugins = [];
if (process.env.NODE_ENV === 'production') {
    prodPlugins.push('transform-remove-console');
}
// 在plugins中添加发布产品时候的插件数组
plugins: [  
	
    ...prodPlugins
]

4、生成打包报告

1、在可视化UI面板中，通过控制台和分析，查看报告
2、可以看到依赖项资源的文件大小以及不同浏览器下的打开时间

5、自定义配置webpack 打包入口等

创建vue.config.js文件，基本格式 module.exports = { }
为开发模式和发布模式指定不同的打包入口main-dev.js main-prod.js。通过chainWebpack实现（链式编程原理）
chainWebpack实现不同打包入口的基本过程：通过when函数判断当前是处于production development阶段，使用config进入app，再使用clear清空入口文件，最后在add追加一个新的入口文件
代码如下：
process.env.NODE_ENV可以拿到当前处于什么模式

// 自定义不同的打包入口(开发阶段 发布阶段时入口不同)
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            // entry找到默认的打包入口，调用clear则是删除默认的打包入口,add添加新的打包入口
            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');       
        })

6、通过externals加载外部CDN资源

在打包期间不会把包合并到文件里，而是到window全局对象中查找这个包并直接使用

在vue.config.js的发布模式配置externals节点，通过config.set(‘externals’, { })
代码如下：

// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口,add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js');
      // external节点
      config.set('externals', {
           vue: 'Vue',
           'vue-router': 'VueRouter',
           axios: 'axios',
           echarts: 'echarts',
           lodash: '_',
           nprogress: 'Nprogress',
           'vue-qill-editor': 'VueQuillEditor'
       })
 })

在main-prod文件中，删除
富文本编辑器
滚动条样式表
导入富文本的import和注册富文本的use都删掉
直接把样式引入到public/index中，需要在public/index/html中，添加js文件的引用

		<!-- nprogress的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
        <!-- 富文本编辑器的样式表文件-->
        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.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>
        <!-- 富文本编辑器的js文件 -->
        <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

7、通过CDN优化elementui组件的打包

在main-prod中，注释掉element-ui按需加载的代码
在index.html头部，通过CDN加载elementui的js和css样式

<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.2/theme-chalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.13.2/index.js"></script>

8、首页内容自定制

开发模式下 title是dev-xxx.发布模式下直接展示title

通过config.plugin(‘hml’.tap()）插件。返回一个IsProd，来决定如何展示标题和加载CDN


 chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            // entry找到默认的打包入口，调用clear则是删除默认的打包入口,add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js');

            // external节点
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                echarts: 'echarts',
                lodash: '_',
                nprogress: 'Nprogress',
                'vue-qill-editor': 'VueQuillEditor',
                // 'element-ui': 'ElementUI'
            })

            // 通过插件定制首页，自定义一个isProd属性
            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
            })
        })
    }

在首页通过<%=htmlWebpackPlugin.options.isProd ? ' ' : 'dev - ' %>电商后台管理系统
在样式表和js文件的外部包一个

<% if (htmlWebpackPlugin.options.isProd) { %>
 css
 css
 js
 js
 <% } %>

9、路由懒加载

安装开发依赖 @babel/plugin-syntax-dynamic-import
在babel.config.js配置文件中声明该插件plugins中，新增一个插件

plugins: [
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ],
        // 发布产品时候的插件数组
        ...prodPlugins,

        // 路由懒加载插件
        '@babel/plugin-syntax-dynamic-import'
    ]

将路由都改为懒加载的形式

// import Login from '@/components/Login'
const Login = () =>
    import ( /* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')

// import Home from '../components/Home'
const Home = () =>
    import ( /* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')

// import Welcome from '../components/Welcome'
const Welcome = () =>
    import ( /* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

. const Cate()=>import("../components/goods/Cate") 不需要什么插件，直接可以实现懒加载

二、部署上线

1、一些部署时的bug

bug，Cannot GET：重新试一下，就是把vue_shop_server整个删除，重新生成（因为可能是module没有生成完整）
命令行报错Uncaught ReferenceError: Nprogress is not defined是NProgress而不是Nprogress，注意大小写问题。而且vue.config.js的externals中也需要改成NProgress
参考这篇：简书NProgress
pm2无法加载文件，不需要使用管理员身份加载，多试几次，是有一些玄学的

2、部署步骤

1、通过node创建web服务器

创建node项目，并安装express，通过express创建web服务器，将vue打包生成的dist托管为静态资源。

新建vue_shop_server
在中断允许 npm init -y初始化包管理配置文件
安装express npm i express -S
把dist放到server中，
新建app.js，导入express，进行配置，具体代码如下所示
执行node app，当终端打印出地址时，可以访问
代码如下（示例）：

// 导入express
const express = require('express');

// 创建服务器
const app = express();

// 把目录托管为静态目录
app.use(express.static('/dist'));

// 启动服务器
app.listen(80, () => {
    console.log('server running at http://127.0.0.1')
})

2、开启gzip配置

减小文件体积，传输速度更快

npm i compression -S装包
const compressopm = require();导入包
app.use(compression())；注册中间件必须写到静态资源static托管之前，先压缩，再托管
app.js中代码如下所示

const express = require('express');
const compression = require('compression');

const app = express();
// 注册中间件先gzip压缩，再姿态资源托管
app.use(compression());
app.use(express.static('./dist'));

app.listen(80, () => {
    console.log('server is running at http://127.0.0.1');
})

3、配置HTTPS服务（一般是后端，这里不演示了）

防止信息被截取，更加安全
1、需要申请SSL证书（https://freessl.cn），在vue_shop_server的根目录中，放如full_chain.pem private.key公钥和私钥
2、在后台项目中导入证书

const express = require('express');
const compression = require('compression');
const https = require('https');
const fs = require('fs');

const app = express();

// 同步读取文件
const options = {
    cert: fs.readFileSync('./full_chain/pen'),
    key: fs.readFileSync('./private.key')
}

// 注册中间件先gzip压缩，再姿态资源托管
app.use(compression());
app.use(express.static('./dist'));

/* app.listen(80, () => {
    console.log('server is running at http://127.0.0.1');
}) */

// 启动https服务器，默认在443端口
https.createServer(options, app).listen(433);

4、启动pm2管理应用

把https注释掉，继续使用80端口
在vue_shop_server根目录下，右击+shift，打开一个powershell
输入 node app+tab键，补全路径，可以访问后台系统，但是当powershell关掉后，就无法访问了
因此我们需要pm2管理

npm i pm2 -g； 在cmdc窗口中全局安装
powershell中： pm2 start 脚本 --name 自定义名称； 在powershell中启用项目如pm2 start app(tab) --name web_vueshop

pm2 ls；在cmd窗口中查看所有正在运行项目
pm2.stop； 如pm2 stop 0 ，pm2 stop web_vueshop
pm2 restart； 重启项目如 pm2 restart 0 ，pm2 restart web_vueshop
pm2 delete；删除项目 pm2 delete 0 ，pm2 delete web_vueshop.此时如果想重新打开该项目，就要在powershell中启用项目了
在vue_shop_server的根目录下powershell里运行 pm2 start app.js+tab --name web_vueshop

总结

完成了vue_shop电商后台管理系统，美美收工啦~

小魏每天都学习

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue项目优化与部署上线

vue项目部署上线流程一、添加nprogress依赖项生成进度条效果二、使用步骤1.引入库2.读入数据总结本文对vue项目部署上线的一套流程做个小结，包括项目优化、项目上线两个部分，方便日后的学习与回顾项目优化的内容一般包括：生成打包报告、开启第三方库CDN加载、elementui按需加载、懒加载、首页内容定制。本文从首页进度条效果、提示：以下是本篇文章正文内容，下面案例可供参考一、添加nprogress依赖项生成进度条效果示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据
复制链接

扫一扫