「随手一记」「Vue.js篇」「npm run dev（build）配置开发、测试、生产环境」

在开发及线上（打包）过程中，经常会遇到根据不同的环境（开发、测试、生产）进行项目的发布。因此本文章主要介绍使用 npm run dev 和 npm run build 进行配置开发、测试、生产环境的切换，这只是切换方式之一（当然还有其他的方式，这里不做介绍）。

本文章介绍的方法有点繁琐，仅供参数，若有哪里写错或不足的地方，请指教。

 

项目介绍

开发工具：Visual Studio Code

构建脚支架：webpack

项目名称：VUE-DEMO

 

涉及目录及文件

主要涉及目录及默认文件：build 和 config

  

主要涉及文件，共6个文件：

build\build.js：线上生产环境时用的脚本

build\webpack.dev.conf.js：开发过程中用的脚本

build\webpack.prod.conf.js：线上生产环境时用的脚本

config\dev.env.js：开发过程中用的配置脚本

config\prod.env.js：线上生产环境时用的配置脚本

package.json：涉及npm run 相关脚本

       特此说明：在 build 和 config 目录下看到 dev 和 prod 字眼的文件，是表示开发（dev）和线上（prod）的配置文件，其中 prod 不是正式的意思。

  

 

配置线上环境要点

主要涉及文件有：

build\build.js

build\webpack.prod.conf.js

config\prod.env.js

根据环境不同，进行复制相关文件并重命名对应的名称，具体见下文；

并修改（追加）其中对应引用的部分，如下图：

注意事项：config 目录中配置文件内的配置值必须由单引号和双引用包裹，否则会报错（下文相关配置均需要注意该事项）。

 

配置线上-生产环境

只需修改 config\prod.env.js 文件即可，其内容如下：

module.exports = {

  NODE_ENV: '"production"&