在实际开发中常遇到，代码在

在package.json文件的剧本中，会提供开发环境与生产环境两个命令。但是实际使用中会遇见测试版与正式版代码相继发布的情况，这样反复更改服务器地址，偶尔忘记更改全球资源定位器(统一资源定位符)会给工作带来很多不必要的麻烦（当然也会对你的工作能力产生质疑)。这样就需要在生产环境中配置测试版本打包命令与正式版本打包命令。

1、包。数据文件中增加命令行命令，并指定路径。

脚本： { 'dev': '节点build/dev-server.js '，' build': '节点build/build.js '，//正式环境打包命令fev': '节点build/test.js' //测试环境打包命令},2、在建设文件中添加相应文件

test.js

//https://github。com/shelljs/shelljsrequire(' ./check-versions())过程。ENV。node _ ENV=' fev ' var ora=require(' ora ')var path=require(' path ')var粉笔=require('粉笔)var shell=require(' shelljs ')var web pack=require(' web pack ')var config=require('./config ')var webpackConfig=require ' ./web pack。测试。conf ')var spinner=ora('为forced expiratory volume 最大呼气量构建.)旋转器。start()var资产路径=path。加入(配置。fev。资产根，配置。fev。资产子目录)shell.rm('-rf '，资产路径)shell。mkdir('-p '，资产路径)shell。配置。无声=真实外壳。CP('-R '，/static *，资产路径)外壳。配置。silent=false web pack(webpackConfig，function (err，stats){ spinner。如果(错误)抛出进程，则停止()。标准输出。写入(统计数据。tostring({ colors33n ')控制台。日志（粉笔。黄色(' Tip:构建的文件应该通过超文本传送协议服务器提供“n”通过文件：//打开index.html将不起作用. n ')})网络包。测试。糖膏剂射流研究…

var path=require(' path ')var utils=require(' ./utils ')var web pack=require(' web pack ')var config=require('./config ')var merge=require(' web pack-merge ')var base web packkkconfig=require(' ./web pack。基地。conf ')var html web packk plugin=require(' html-web pack-plugin ')var extext plugin=require(' ext-text-web pack-plugin ')var env=config。fev。env var webpackConfig=merge(basebpackconfig，{ module : { rules 3360 utils。样式加载器({源地图： config。fev。生产源映射，extract: true }) })，devtool: config .#source-map' : false，输出： { path : config。fev。资产根目录，文件名： utils。资产路径(' js/[name]).[chunkhash].js ')，chunkfilename : utils。资产路径(' js/[id]).[chunkhash].js') }，plugins :[//http://vuejs . github . io/vue-loader/en/workflow/production . html新网络包define plugin({ ' process。env ' : env })，新的网络包。优化。uglifyjsplugin({ compression : { warning : false，drop_console: true }，sourceMap: true })，//将钢性铸铁提取到自己的文件新的extplugin({ filename : utils。资产路径(' CSS/[名称]).[contenthash].css') })，//使用正确的资产哈希生成index.html区，用于缓存。//可以通过编辑/index.html //查看https://github.com/ampedandwired/html-webpack-plugin新html web pack plugin({ filename : config。fev。index，template: 'index.html '，inject: true，minify 3360 { remove comments : true，collapseWhitespace: true，removeattributequots : true//更多选项：//https://github。com/kangax/html-minifier #选项js$/.测试(模块。资源)模块。资源。indexof(路径。join(_ _ dirname)'，/node _ modules ')===0)})，//将工具运行时和模块清单提取到自己的文件中，以便//防止每当应用捆绑包更新为新的网络包。优化。commonschunk插件({ name : ' manifest '，chunk s 3360[' vendor ']})})if(config。fev。production gzip){ var compresswebpackkplugin=require(' compresswebpack-plugin ')web pack。插件。push(new compresswebpackkplugin({ 1 gz[query]'，algorithm: 'gzip '，test: new RegExp('\ .(' config。fev。ProductigZipExtensions。join(' | ')')$ ')，threshold: 10240，minRati3360 0 { 0.8 })} if(config。fev。bundlealyzer报告){ var bundlealyzer plugin=require(' web pack-bundle-analyzer ').bundlealyzer插件webpackconfig。插件。推送(新的bundlelyzer plugin())}模块。exports=webpackkconfig 3，在配置文件中增加环境变量配置

test.env.js增加环境变量

模块。exports={ NODE _ ENV: ' ' fev ' ' }索引。射流研究…

//有关文档，请参见http://vuejs-templates.github.io/webpack。var path=required(' path ')模块导出={ build : { env : require ' ./prod.env ')，索引：路径。解析(_ _ dirname '，/dist/index.html ')，assetroot :路径。解析(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，//assets publicath : ' ./'，assetsPublicPath: ' '，//公共资源路径productionSourceMap: false，//Gzip默认关闭，因为许多流行的静态主机（如//Sphing或Netlify)已经为您Gzip了所有静态资产。//在设置为"真"之前，请确保设置为：//NPM安装-保存-开发压缩-web pack-plugin production gzip : false，production gzipcextensions 3360[' js '，' css']，//运行带有额外参数的建设命令//在构建完成后查看包分析器报告：/` NPM运行构建-报告`//设置为"真"或"假"以始终打开或关闭bundleAnalyzerReport:进程。env.npm/test.env ')，指数：路径。解析(_ _ dirname '，/dist/index.html ')，assetroot :路径。解析(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，assetsPublicPath: ' ./', //公共资源路径productionSourceMap: false，//Gzip默认关闭，因为许多流行的静态主机（如//Sphing或Netlify)已经为您Gzip了所有静态资产。//在设置为"真"之前，请确保设置为：//NPM安装-保存-开发压缩-web pack-plugin production gzip : false，production gzipcextensions 3360[' js '，' css']，//运行带有额外参数的建设命令//在构建完成后查看包分析器报告：/` NPM运行构建-报告`//设置为"真"或"假"以始终打开或关闭bundleAnalyzerReport:进程。env.npm/test.env ')，指数：路径。解析(_ _ dirname '，/dist/index.html ')，assetroot :路径。解析(_ _ dirname '，/dist ')，assetsSubDirectory: ' static '，assetsPublicPath: ' ./'，productionSourceMap: false，//Gzip默认关闭，因为许多流行的静态主机（如//Sphing或Netlify)已经为您Gzip了所有静态资产。//在设置为"真"之前，请确保设置为：//NPM安装-保存-开发压缩-web pack-plugin production gzip : false，production gzipcextensions 3360[' js '，' css']，//运行带有额外参数的建设命令//在构建完成后查看包分析器报告：/` NPM运行构建-报告`//设置为"真"或"假"以始终打开或关闭bundleAnalyzerReport:进程。env.npm/dev.env ')，端口： 8081，autoOpenBrowser: true，assetsSubDirectory: ' static '，assets publicatpath : '/'，代理表： {//'/API ' : {//target : ' http://jsonplaceholder。典型性code.com '，//changerigin : true，//路径重写3360 {///'/API '等cssSourceMap: false } } 4、在main.js文件中在增加环境变量判断

if(过程。ENV。NODE _ ENV==' production '){定义。' html _ URL='正式环境URL '；} if(过程。ENV。NODE _ ENV==' development '){定义。' html _ URL='开发环境URL '；} if(过程。ENV。NODE _ ENV==' fev '){定义。' html _ URL='测试环境URL '；}5、如果公共资源路径，在不同环境中需要更改。在webpack.base.conf.js中配置打包文件输出的公共路径。

var path=require(' path ')var utils=require(' ./utils ')var config=必选('./config ')var vueLoaderConfig=require ' ./vue-loader.conf')//增加文件路径判断var web pack _ public _ path=if(process。ENV。node _ ENV==' production '){ web pack _ public _ path=config。建造。资产公共路径；} else if(process。ENV。NODE _ ENV==' fev '){ web pack _ public _ path=config。fev。资产公共路径；} else if(process。ENV。node _ ENV==' dev '){ web pack _ public _ path=config。戴夫。资产公共路径；}函数解析(目录){返回路径。join(_ _ dirname，'.'，目录)模块。导出={ //测试使用条目： { app :[' promise-poly fill '，' ./src/main.js'] }，//entry: { //app: ' ./src/main。js '/}，输出： {路径： config。建造。资产根，文件名：[名称].js '，公共路径： web pack _ public _ path//公共路径：进程。ENV。NODE _ ENV==' production ' | | process。ENV。NODE _ ENV==' fev '？配置。建造。资产公共路径//:配置。戴夫。资产公共路径}，解析： {扩展3360[].js '，' .呜呜呜.json']，modules: [ resolve('src ')，resolve('node_modules ')，]，alias : { ' vue $ ' : ' vue/dist/vue。常见。js '，' src':解析(' src ')，' assets ' :解析(' src/assets ')，' components ' 3:解析(' src/components ')，' vendor ' 33:路径。解析(_ dir)./src/api ')，//'供应商' :路径。解析(_ dirname '，/src/vendor ')，} }，模块： { rules 3360 [{ test :/ .vue$/，loader: 'vue-loader' }，test: / .js$/，loader: 'babel-loader '，包含： [resolve('src ')，resolve('test')] }，{ test: / .(png|jpe？g|gif|svg)(？*)?$/，loader: 'url-loader '，query: { limit: 10000，name : utils。资产路径(' img/[name]).[hash:7].[ext]') }，{ test: / .(woff2？|eot|ttf|otf)(？*)?$/，loader: 'url-loader '，query: { limit: 10000，name : utils。资产路径(' font/[name]).[hash:7].[ext]') } } ] }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。