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

最新推荐文章于 2023-07-18 17:45:17 发布

CookChopper

最新推荐文章于 2023-07-18 17:45:17 发布

阅读量225

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

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'