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

最新推荐文章于 2023-01-14 14:35:15 发布

Hope瑶瑶瑶~☆

最新推荐文章于 2023-01-14 14:35:15 发布

阅读量1k

点赞数 5

文章标签： vue.js

本文链接：https://blog.csdn.net/confidence_fy/article/details/120624826

版权

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的<head></head>头部中引入

    <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
      <!-- nprogress 的样式表文件 -->
      <!-- 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" />
      <!-- element-ui 的样式表文件 -->
      <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.2/theme-chalk/index.css" />
      
      <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> -->

      <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>
      <!-- element-ui 的 js 文件 -->
      <script src="https://cdn.staticfile.org/element-ui/2.15.2/index.js"></script>

在生产入口文件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中设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  .......

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

Hope瑶瑶瑶~☆

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
Vue后台管理系统打包+项目优化+上线

1.进度条实现在点击某个功能时加载的过程中有进度条显示效果先打开项目控制台，打开依赖，安装nprogress，安装命令 npm i --save nprogress在mian.js中引入//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'下载完成后在封装axios请求的js文件中进开启和关闭import axios from 'axios'import st.
复制链接

扫一扫