Vue后台管理系统打包+项目优化+上线

1.进度条

实现在点击某个功能时加载的过程中有进度条显示效果

先打开项目控制台，打开依赖，安装nprogress，安装命令 npm i --save nprogress 

在mian.js中引入

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'

下载完成后在封装axios请求的js文件中进开启和关闭

import axios from 'axios'
import store from '../store'
// 根据环境不同引入不同api地址
import { baseUrl } from '@/config/index.js'


import NProgress from "nprogress"
import 'nprogress/nprogress.css'


// create an axios instance
const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
//   withCredentials: true, // send cookies when cross-domain requests
  timeout: 50000 // request timeout
})

// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    NProgress.start()  //开启进度条
    config.headers ['Authorization'] =sessionStorage.getItem('token')
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(function (response) {
     NProgress.done ()  //响应完成后关闭
    // 对响应数据做点什么
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default service

2.创建config.js

在根目录下创建config.js文件

 修改静态资源路径，不修改则会出现白屏的情况

module.exports = {
    publicPath:"./",
}

 3.生成打包报告 其目的是直观的发现项目中存在的问题

 A.命令行形式生成打包报告

在package.json文件中的script中的build添加--report 

vue-cli-service build --report

B.在vue控制台生成打包报告
点击“任务”=>“build”=>“运行”
运行完毕之后点击右侧“分析”，“控制台”面板查看报告

在服务器环境运行dist通过在vscode中下载插件，找到dist文件夹下面的index.html看运行效果

 4.第一次在终端npm run build 打包生成的map文件比js还要大，去除sourcemap

module.exports = {
    publicPath:"./",
    productionSourceMap: false, // 加上这个就可以了
}

 5.去除注释

安装 babel-plugin-transform-remove-console --save-dev

安装完成后会自动生成babel.config.js

//项目发布阶段需要用到的babel插件 //默认是空数组
const productPlugins = []

//判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {
  //发布阶段
  productPlugins.push("transform-remove-console")
}

 6.在引入第三方包之前我们先进行拆分

开发入口文件 main-dev.js

生产入口文件 main-prod.js

我们可以把根目录下的main.js文件进行重命名后进行复制,或者是创建好入口文件进行删除

在vue.config.js中添加chainWebpack，并且修改webpack的默认值【判断环境模式】

设置externals排除项在externals中的第三方依赖包都不会被打包，可以减少很大的体积

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

            //使用externals设置排除项
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                'element-ui': 'ElementUI',
                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')
        })
    }

7.externals加载cdn资源，现在我们引入cdn

     默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大

     那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中

在public夹文件中的index.html的头部中引入

在生产入口文件main-prod.js我们可以在注释掉富文本编辑样式的当行代码只有在开发环境用到

那么打包下来的main-prod.js文件中的完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


//环境配置
import { baseUrl } from '@/config/index.js'
console.log(baseUrl);

//导入axios
// import axios from '@/utils/service.js'
// Vue.prototype.$axios = axios; // 把axios挂载到Vue的原型上，这样的话项目中任何一个组件都可以使用了

// 移动端适配
import 'lib-flexible/flexible';

//引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts=echarts

//引入font
import '../src/assets/fonts/iconfont.css'

//引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);

//引入 tree-table
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)


//过滤器
Vue.filter('dataFormat', function (originVal) {
    const dt = new Date(originVal)

    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDate() + '').padStart(2, '0')

    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')
    // yyyy-mm-dd hh:mm:ss
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

8.实现路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。

在router.js中把路由改成按需加载的形式

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
// import Login from './components/Login.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Home.vue')
// import Home from './components/Home.vue'
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue')
// import Welcome from './components/Welcome.vue'
const Users = () => import(/* webpackChunkName:"user" */ './components/user/Users.vue')
// import Users from './components/user/Users.vue'
const Rights = () => import(/* webpackChunkName:"power" */ './components/power/Rights.vue')
// import Rights from './components/power/Rights.vue'
const Roles = () => import(/* webpackChunkName:"power" */ './components/power/Roles.vue')
// import Roles from './components/power/Roles.vue'
const Cate = () => import(/* webpackChunkName:"goods" */ './components/goods/Cate.vue')
// import Cate from './components/goods/Cate.vue'
const Params = () => import(/* webpackChunkName:"goods" */ './components/goods/Params.vue')
// import Params from './components/goods/Params.vue'
const GoodList = () => import(/* webpackChunkName:"goods" */ './components/goods/List.vue')
// import GoodList from './components/goods/List.vue'
const GoodAdd = () => import(/* webpackChunkName:"goods" */ './components/goods/Add.vue')
// import GoodAdd from './components/goods/Add.vue'
const Order = () => import(/* webpackChunkName:"order" */ './components/order/Order.vue')
// import Order from './components/order/Order.vue'
const Report = () => import(/* webpackChunkName:"report" */ './components/report/Report.vue')
// import Report from './components/report/Report.vue'

 在babel.config.js中添加配置路由懒加载组件

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

babel.config.js中的完整代码如下：

//项目发布阶段需要用到的babel插件 //默认是空数组
const productPlugins = []

//判断是开发还是发布阶段
if (process.env.NODE_ENV === 'production') {
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    //发布产品时的插件数组
    ...productPlugins,
    //实现路由懒加载
    "@babel/plugin-syntax-dynamic-import"
  ]
}

    打包完成后，dist的体积会减少很多，我的这个项目是从4.38MB到最后的611KB这显然已经很成功了ヾ(๑╹◡╹)ﾉ"

 当我们打包完成后检测运行npm run serve这时小伙伴们可能会遇到这种问题

 这是什么问题呢？是由于我们cdn引入的路由跟我们安转的路由版本不一致，我们在安装脚手架的时候router是默认安装的,所以需要把package.json中的改成"vue-router": "^3.5.2",切记改完后并不能成功，还需要我们删除依赖重新安装

同时解决方案：

vue-cli 项目优化时报错 Uncaught TypeError: Cannot redefine property: $router_m0_51608940的博客-CSDN博客

9.实现首页优化 <% 三元运算语句进行判断><%>

开发环境的首页和发布环境的首页展示内容的形式有所不同
如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现

在public/index.html中设置

  
    
    
    
    
    

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

 在vue.config.js中

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                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=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

 10.项目上线

 A.通过node创建服务器

在vue_shop（上述项目）同级创建一个文件夹vue_shop_server存放node服务器
使用终端打开vue_shop_server文件夹，输入命令npm init -y
初始化包之后，输入命令npm i express -S
打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中
在vue_shop_server文件夹中创建app.js文件,编写代码如下：

const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

在终端输入node app.js

B.开启gzip压缩

打开vue_shop_server文件夹的终端，输入命令：npm i compression -D
打开app.js,编写代码：

const express = require('express')

const compression = require('compression')

const app = express()

app.use(compression())
app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})