项目优化打包部署

一、项目优化

1.去掉打印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 () {}
    }
    

2.解决依赖包大的问题

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

二、项目打包

1.项目配置

• 详见：webpack中文网

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

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

三、项目部署

1.本地服务器

• 通过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('服务器已成功启动')
  })
  

2.远程服务器

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