项目优化打包部署

1|0一、项目优化

1|11.去掉打印console

• 需求：在开发环境中，保留打印console；在生产上线环境，自动去掉打印console

• 使用步骤：

  • 第一步：在项目根目录下，创建如下图两个配置文件

    

    在.env.development中(开发环境变量)

    NODE_ENV=development
    

    在.env.production中(生产上线环境变量)

    NODE_ENV=production
    

  • 第二步：在main.js中添加配置

    if (process.env.NODE_ENV !== 'development') {
      // process是Node环境全部变量, 运行时根据敲击的命令不同, 脚手架会取环境变量给env添加属性和值
      console.log = function () {}
      console.error = function () {}
      console.dir = function () {}
    }
    

1|22.解决依赖包大的问题

• 默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
• 解决方案：通过externals加载外部CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。
• 在public/index.html文件的头部，添加对应的CDN资源引用。

2|0二、项目打包

2|11.项目配置

• 详见：webpack中文网

• 在项目根目录下，创建vue.config.js文件

  module.exports = {
    // 打包后的基本路径
    publicPath: './'
  }
  

3|0三、项目部署

3|11.本地服务器

• 通过node创建web服务器

• 并开启gzip配置，以减少文件体积，使传输速度更快

  • npm install compression -D

  // 创建node项目，并安装express，通过express快速创建web服务器，将vue打包生产的dist文件夹，托管为静态资源，并开启gzip配置，以减少文件体积，使传输速度更快
  const express = require('express')
  const compression = require('compression')
  // 创建web服务器
  const app = express()
  // 启用中间件
  app.use(compression())
  // 托管静态资源
  app.use(express.static('./dist'))
  // 启动web服务器
  app.listen(80, () => {
      console.log('服务器已成功启动')
  })
  

3|22.远程服务器

链接：https://pan.baidu.com/s/1B0l6WNWt1goOxE_zYY3Fdg?pwd=0i9b
提取码：0i9b
--来自百度网盘超级会员V4的分享

__EOF__

本文作者：不见水星记
本文链接：https://www.cnblogs.com/P1Kaj1uu/p/16740495.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！