Vue项目优化上线

项目优化上线

1.项目优化

①页面进度条效果

运行依赖->nprogress

1. 导入包和样式

// [main.js]
// 加载进度条包对应js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2. 请求拦截器中配置进度条

// [main.js]
// axios请求拦截
axios.interceptors.request.use(config => {
  NProgress.start() // 在request中展示进度条
  // ......
})

axios.interceptors.request.use(config => {
  NProgress.done() // 在response中隐藏进度
  // ......
})

②移除console

在项目发布build阶段移除console

开发依赖->babel-plugin-transform-remove-console

babel.config.js全局共享

// [babel.config.js]
// 项目发布阶段需要用到的bable插件
const prodPlugins=[]


if (process.env.NODE_ENV ==='production'){
  prodPlugins.push('transform-remove-console')
}

module.exports = {
    // ......
    // 发布产品时的插件
    ...prodPlugins,
    // ......
  ]
}

③生成打包报告

• 通过命令行参数的形式生成报告

//通过vue-cli 的命令选项可以生成打包报告
// --report选项可以生成report.html以帮助分析包内容
vue-cli-service build --rport

• 通过可视化的UI面板直接查看报告(推荐)

  在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。

④修改webpack的默认配置

在项目根目录创建vue.config.js，导出自定义配置选项的对象

// [vue.config.js]
module.exports={
    // 配置选项
}

⑤开发模式和发布模式指定不同打包入口

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。
在这里，configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同:

chainWebpac通过链式编程的形式，来修改默认的webpack配置

configureWebpack通过操作对象的形式，来修改默认的webpack配置

// [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')
        })
    }
}

⑥第三方库启用CDN

通过externals加载外部 CDN资下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。

1. 配置资源，只要使用了指定包，就到全局查找对应资源

// [vue.config.js->发布模式]
config.set('externals', {
    vue: 'Vue',
    // 'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor'
})

2. 在index.html中添加样式表资源，删除main-prod.js中的样式表

<!-- [public/index.html] -->
<!-- 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" />

3. 在index.html中添加js文件资源，删除main-prod.js中的js资源

<!-- [public/index.html] -->
<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>

Vue 打包后报错 Uncaught TypeError: Cannot redefine property: $router

https://www.cnblogs.com/mengyouyouyou/p/10936171.html

⑦Element-U组件按需加载

虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element-ui中的组件，也通过CDN的形式来加载，这样能够进一步减小打包后的文件体积。

具体操作流程如下:

①在main-prod.js中，注释掉element-ui按需加载的代码

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

<!-- [public/index.html] -->
<!--element-ui的样式表文件-->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css" />

<!-- element-ui的js文件-->
<script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>

if there's nested data, rowKey is required.

https://blog.csdn.net/qq_33846125/article/details/103608849

⑧路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由

被访问的时候才加载对应组件，这样就更加高效了。

具体需要3步:

①开发依赖，安装@babel/plugin-syntax-dynamic-import。

②在babel.config.js配置文件中声明该插件。

// [babel.config.js]
module.exports = {
  //......
  plugins: [
    // ......
    '@babel/plugin-syntax-dynamic-import'
  ]
}

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

当请求Foo时，因为在同一组中也会将Bar请求回来。

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

// [index.js]
const Login=()=>import(/* webpackChunkName:"login_home_welcome" */'../components/Login.vue')
const Home=()=>import(/* webpackChunkName:"login_home_welcome" */'../components/Home.vue')
const Welcome=()=>import(/* webpackChunkName:"login_home_welcome" */'../components/Welcome.vue')

const Users=()=>import(/* webpackChunkName:"users_rights_roles" */'../components/user/Users.vue')
const Rights=()=>import(/* webpackChunkName:"users_rights_roles" */'../components/rights/Rights.vue')
const Roles=()=>import(/* webpackChunkName:"users_rights_roles" */'../components/rights/Roles.vue')

⑨首页内容定制

自定义首页标题

// [vue.config.js]
//发布模式         
config.plugin('html').tap(args => {
    args[0].isProd = true
    return args
})
// 开发模式
config.plugin('html').tap(args => {
    args[0].isProd = false
    return args
})

<!-- [public/index.html] -->
<!-- 按需渲染页面标题 -->
<title><%= htmlWebpackPlugin.options.isProd ? '':'dev-' %><%= htmlWebpackPlugin.options.title %></title>
<!-- 按需加载外部的CDN资源 -->
<% if(htmlWebpackPlugin.options.isProd){%>
   发布模式下加载的js和css
<%}%>

2.项目上线

①通过node创建web服务器

文件夹vue-shop-server，创建node项目，初始化包管理文件npm init -y，并安装expressnpm i express -S，通过express快速创建web服务器，将vue打包生成的dist文件夹复制粘贴到vue-shop-server中，并托管为静态资源即可，关键代码如下:

// [vue-shop-server/app.js]
const express =require ('express')
//创建web服务器
const app = express ()
//托管静态资源
app.use (express.static ('./dist')
//启动web服务器
app.listen(80,()=> {
	console.log ('web server running at http://127.0.0.1')
} )

②开启gzip配置

使用gzip可以减小文件体积，使传输速度更快。

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

//安装相应包
npm install compression -S
// [vue-shop-server/app.js]
//导入包
const compression = require ('compression') ;
//托管静态资源之前启用中间件
app.use(compression()) ;

③配置https服务

• 申请SSL 证书(https://freessl.org)

  ①进入https://freessl.cn/官网，输入要申请的域名并选择品牌。

  ②输入自己的邮箱并选择相关选项。

  ③验证DNS(在域名管理后台添加TXT记录)。

  ④验证通过之后，下载SSL证书( full_chain.pem 公钥; private.key私钥)。

• 在后台项目导入证书

// [vue-shop-server/app.js]
const https = require ('https') ;
const fs = require ('fs');

const options = {
    cert: fs.readFilesync ('./full_chain.pem') ,
    key: fs.readFilesync ('./private.key')
}

https.createserver(options,app).listen (443);

④使用pm2管理应用

在服务器中安装pm2: npm i pm2 -g

启动项目: pm2 start 脚本 --name 自定义名称

查看运行项目:pm2 ls

重启项目: pm2 restart 自定义名称

停止项目: pm2 stop 自定义名称或pm2 stop 项目id

删除项目: pm2 delete 自定义名称

项目目录下，启动项目pm2 start .\app.js --name vue-shop