Vue项目优化技巧和项目上线

最新推荐文章于 2024-06-03 16:39:14 发布

CookChopper

最新推荐文章于 2024-06-03 16:39:14 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏：努力学前端文章标签： vue webpack

本文链接：https://blog.csdn.net/hjc13348/article/details/118280791

努力学前端专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了Vue项目的优化技巧，包括配置nprogress进度条、移除console.log信息、设置开发与发布的不同打包入口、使用externals加载CDN资源、实现路由懒加载等。此外，还讲解了项目上线的步骤，如node.js部署、配置https服务、启用GZIP压缩以及通过pm2进行应用管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 配置loading效果

1.1 nprogress进度条

$ npm i nprogress -S

// 修改main.js入口文件
// 导入进度条效果
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 在请求拦截器和响应拦截器配置
// 请求拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  //开启nprogress效果
  NProgress.start()
  return config
})
axios.interceptors.response.use(res => {
  //关闭nprogress效果
  NProgress.done()
  return res
})

2 项目优化

2.1 生产环境移除console.log信息

安装babel-plugin-transform-remove-console

$ npm install babel-minify --save-dev

打开babel.config.js，编辑代码如下：

const ProdPlugins = []
// 区分生产环境还是开发环境 是生产环境才使用插件
if (process.env.NODE_ENV === 'production') {
  ProdPlugins.push('babel-plugin-transform-remove-console')
}
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    //展开运算符 插入插件
    ...ProdPlugins
  ]
}

2.2 为开发模式与发布模式指定不同的打包入口

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

打开Vue.config.js配置webpack项

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

2.3 externals加载外部cdn资源

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

修改 vue.config.js文件

// vue.config.js文件
module.exports = {
  chainWebpack: config => {
    // 生产环境 打包入口文件
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

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

在plugin/index.html引入CDN资源

<!DOCTYPE html>
<html lang="">
  <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){%>

      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
     <!-- 引入nprogress cdn -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css">
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>

    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 引入富文本编辑器 -->
     <!-- 富文本编辑器 的样式表文件 -->
     <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/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>

    <script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>

    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

打开main_prod.js编辑注释导入的插件即可

2.4 定制首页内容

打开vue.config.js 编辑添加参数

module.exports = {
  chainWebpack: config => {
    // 生产环境 打包入口文件
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

      // 使用externals设置排除项
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      // 使用插件 *****************************
      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
      })
    })
  }
}

打开plugin/index.html 可以访问到添加的参数isProd

	<!-- 可以通过 htmlWebpackPlugin.options.isProd 获取参数值
	<%= %> 绑定数据
	<% %> 脚本片段 例如 if语句
	 -->
  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev-' %>电商后台管理系统</title>
  
	<!-- 
	根据参数布尔值 判断是生产环境还是开发环境 生产环境才使用cdn引入资源
	-->
	 <% if(htmlWebpackPlugin.options.isProd){%>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
    <% } %>

2.5 路由懒加载

安装@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/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

路由改为按需加载模式

// /* webpackChunkName:"login_home_welcome" */  给路由分组 同时懒加载该分组路由
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')

// import Users from '@/components/Users.vue'
// import Rights from '@/components/power/Rights.vue'
// import Roles from '@/components/power/Roles.vue'
const Users = () =>
  import(/* webpackChunkName:"users_rights_roles" */ '@/components/Users.vue')
const Rights = () =>
  import(
    /* webpackChunkName:"users_rights_roles" */ '@/components/power/Rights.vue'
  )
const Roles = () =>
  import(
    /* webpackChunkName:"users_rights_roles" */ '@/components/power/Roles.vue'
  )
// import Cate from '@/components/goods/Cate.vue'
// import Params from '@/components/goods/Params.vue'
const Cate = () =>
  import(/* webpackChunkName:"cate_params" */ '@/components/goods/Cate.vue')
const Params = () =>
  import(/* webpackChunkName:"cate_params" */ '@/components/goods/Params.vue')

// import GoodsList from '@/components/goods/GoodsList.vue'
// import GoodsAdd from '@/components/goods/GoodsAdd.vue'
const GoodsList = () =>
  import(
    /* webpackChunkName:"GoodsList_GoodsAdd" */ '@/components/goods/GoodsList.vue'
  )
const GoodsAdd = () =>
  import(
    /* webpackChunkName:"GoodsList_GoodsAdd" */ '@/components/goods/GoodsAdd.vue'
  )

// import Order from '@/components/order/Order.vue'
const Order = () =>
  import(/* webpackChunkName:"order" */ '@/components/order/Order.vue')
// import Reports from '@/components/report/Report.vue'
const Reports = () =>
  import(/* webpackChunkName:"report" */ '@/components/report/Report.vue')

3 项目上线

3.1 node部署上线项目

安装express框架
导入dist文件夹
静态资源托管

const express = require('express')

const app = express()

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

app.listen(80,()=>{
  console.log('serve run at 127.0.0.1')
})

3.2 配置https服务

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.pem'),
    key:fs.readFileSync('./private.key')
}

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

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

//启动https服务
https.createServer(options,app).listen(443)

3.3 配置GZIP网络传输压缩

安装compression

$ npm i compression -D

编辑app.js

const express = require('express')

//导入compression组件
const compression = require('compression')

const app = express()

//注册compression组件 必须在静态资源前面
app.use(compression())
app.use(express.static('./dist'))

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