项目优化打包部署

  • 项目优化打包部署已关闭评论
  • 234 次浏览
  • A+
所属分类:Web前端
摘要

需求:在开发环境中,保留打印console;在生产上线环境,自动去掉打印console


一、项目优化

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的分享