Vue2切换生产环境、测试环境和开发环境

最新推荐文章于 2025-06-10 09:32:52 发布

陈新月-Phyllis

最新推荐文章于 2025-06-10 09:32:52 发布

阅读量1.1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： ▲项目成长▼ # 实战项目前端 # Vue 文章标签： Vue2 配置不同的环境

本文链接：https://blog.youkuaiyun.com/csxypr/article/details/89644527

本文介绍了在Vue2项目中配置不同环境的方法，包括使用`config`和`build`文件夹的常规方式，以及当这些文件夹不存在时，如何通过`.env`文件设置开发、测试和生产环境。详细步骤包括修改`package.json`脚本、配置`webpack`文件以及创建相应的`.env`文件来指定环境变量。

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

最近小咸儿一直在学习有关Vue的东西，所以将最近在弄得东西总结下来，以供参考。

Vue配置环境变量和模式，可以分为两种模式：

第一种：Vue项目搭建成功后，config和build文件夹都存在
在这里插入图片描述
知道有这两个文件夹后，接下来就该配置环境变量以及对应的模式了。

首先，看一下package.json中配置的启动方式：
在这里插入图片描述
从中，可以看出使用npm run dev启动项目时，dev走的文件是build下面的webpack.dev.conf.js文件

那么，我们去看一下webpack.dev.conf.js文件中是如何配置的
在这里插入图片描述
这时，可以发现最终寻找的文件是config/dev.env文件

知道这一点之后，我们就可以在config/dev.env文件中将我们想要切换的开发模式以及对应的地址放入其中了：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  KERNEL: "'http://192.******/kerne