Vue webpack 自定义打包环境和环境变量

最新推荐文章于 2025-05-20 16:34:06 发布

i听音乐的猿

最新推荐文章于 2025-05-20 16:34:06 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： vue.js

6 篇文章

订阅专栏

本文介绍如何在Vue项目中配置自定义环境，包括安装所需库、设置环境变量及修改Webpack配置等步骤。

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

前言

使用Vue-cli 创建webpack项目时，模板默认提供dev和build脚本，dev为直接在本地启动服务器，build为打包生产环境，但是有些时候我们如果想打包一个自定义的环境（预演环境）的话，需要我们自定义一个环境，借鉴网上杂乱的教程，这里整理出一个完整可用方案。

本文将使用如下环境：

VsCode:1.54.3

项目如何创建可以到百度搜vue-cli创建 webpackage 相关的教程,这里跳过

主要看这两个目录

1 先安装个库

npm install --save cross-env

2. 添加一个自定义p的环境pre

"build-pre": "cross-env NODE_ENV=pre node build/build.js"

如图

3. 添加这个环境对应的变量值pre.env.js 直接复制prod.env.js 把内容改一下

我的文件内容：

'use strict'
module.exports = {
  NODE_ENV: '"pre"',//这里需要改成自定义的名称 
  HEELE:"'ssss'"//随便添加的一个变量 值需要用双引号包着单引号
}

准备就绪后，我们开始配置编译时，让打包工具读取我们的配置

4、注释掉这行代码

5、修改webpack.prod.conf.js文件因为我们打包自定义环境的时候还是需要使用这个文件，原来文件只存在测试环境和生产环境，我们添加环境后需要增加判断来加载对应的配置文件

6、最后一处改动webpack.base.conf.js文件

第6步的作用是保证打包pre环境后，放到Tomcat下启动，静态文件的引用正常。