「随⼿⼀记」「Vue.js篇」「npmrundev（build）配置开发、
测试、⽣产环境」
在开发及线上（打包）过程中，经常会遇到根据不同的环境（开发、测试、⽣产）进⾏项⽬的发布。因此本⽂章主要介绍使⽤ npm run dev 和 npm run build 进⾏配置开发、测试、⽣产环境的切换，这只是切换⽅式之⼀（当然还有其他的⽅式，这⾥不做介绍）。
本⽂章介绍的⽅法有点繁琐，仅供参数，若有哪⾥写错或不⾜的地⽅，请指教。
开发⼯具：Visual Studio Code
构建脚⽀架：webpack
项⽬名称：VUE-DEMO
主要涉及⽬录及默认⽂件：build 和 config
主要涉及⽂件，共6个⽂件：
build\build.js：线上⽣产环境时⽤的脚本
build\f.js：开发过程中⽤的脚本
build\f.js：线上⽣产环境时⽤的脚本
v.js：开发过程中⽤的配置脚本
v.js：线上⽣产环境时⽤的配置脚本
package.json：涉及npm run 相关脚本
特此说明：在 build 和 config ⽬录下看到 dev 和 prod 字眼的⽂件，是表⽰开发（dev）和线上（prod）的配置⽂件，其中 prod 不是正式的意思。
主要涉及⽂件有：
build\build.js
build\f.js
v.js
根据环境不同，进⾏复制相关⽂件并重命名对应的名称，具体见下⽂；
并修改（追加）其中对应引⽤的部分，如下图：
注意事项：config ⽬录中配置⽂件内的配置值必须由单引号和双引⽤包裹，否则会报错（下⽂相关配置均需要注意该事项）。
⽣产环境
只需修改 v.js ⽂件即可，其内容如下：
NODE_ENV: '"production"',
// 项⽬信息
INFO: '"PROJECT-PROD"',
// 项⽬接⼝协议
PROJECT_PROTOCOL: '"http"',
// 项⽬接⼝域名（包含端⼝）
js合并两个数组PROJECT_INTERFACE_DOMAIN: '"prod.demo:81"'
}
效果如下图：
开发环境
将复制的⽂件分别重命名为：
build\build.dev.js
build\webpack.f.js
config\v.js
分别修改内容如下：
require('./webpack.f')
require('../config/v')
NODE_ENV: '"production"',
// 项⽬信息
INFO: '"PROJECT-PROD-DEV"',
// 项⽬接⼝协议
PROJECT_PROTOCOL: '"http"',
/
/ 项⽬接⼝域名（包含端⼝）
PROJECT_INTERFACE_DOMAIN: '"dev.demo:82"' }
效果如下图：
测试环境
将复制的⽂件分别重命名为：
st.js
build\st.conf.js
st.env.js
分别修改内容如下：
require('./st.conf')
require('../st.env')
NODE_ENV: '"production"',
// 项⽬信息
INFO: '"PROJECT-PROD-TEST"',
// 项⽬接⼝协议
PROJECT_PROTOCOL: '"http"',
// 项⽬接⼝域名（包含端⼝）
PROJECT_INTERFACE_DOMAIN: '"test.demo:83"' }
效果如下图：
主要涉及⽂件有：
build\f.js
v.js
根据环境不同，进⾏复制相关⽂件并重命名对应的名称，具体见下⽂；
并修改（追加）其中对应引⽤的部分，如下图：
补充说明：merge ⽅法会将第⼀个参数对象和第⼆个参数对象的值进⾏合并，若两个参数均存在⼀样的属性，则以第⼆个参数对象中的值为准。
⽣产环境
只需修改 v.js ⽂件即可，其内容如下：
NODE_ENV: '"development"',
// 项⽬信息
INFO: '"PROJECT-DEV"'
})
效果如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。