世界上有成千上万种配置，每一种都不一样，以下只是我个人的配置方法；新手朋友仅供参考，如有错误请指正，不胜感激！在我们实际的项目开发中，可能会有多种部署环境、测试环境、预发布环境、正式环境。每个环境的请求URL不一样，每次打包都要手动改，比较麻烦。此时需要配置多环境打包。1、安装cross-envnpminstallcross-env--save2，修改package.json"scripts":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf。js","start":"npmrundev",//"build":"nodebuild/build.js"是这样的，我们需要把这句话注释掉，使用下面的自定义命令"build:test":"cross-envenv_config=testnodebuild/build.js","build:prod":"cross-envenv_config=prodnodebuild/build.js"},3、修改build.js//1，注释//流程.env.NODE_ENV='production'....//省略中间配置constwebpackConfig=require('./webpack.prod.conf')//2,comment//constspinner=ora('buildingforproduction...')//这里是修改，读取设置变量constspinner=ora('buildingfor'+process.env.env_config);spinner.start()4、在config文件夹下新建test.env。js和prod.env.js一样，设置不同的BaseURLs。比如我的项目只需要3个环境，一个用于开发，一个用于本地测试（有可能你会先将项目部署到你本地的ngx，方便别人使用。），一个在线制作，如下只是例子a，先修改'usestrict'constmerge=require('webpack-merge')constdev=require('./dev.env')module为dev.env.js.exports=merge(dev,{NODE_ENV:'"开发"',BASE_API:'"//192.168.31.164:8081"',//这里是配置开发环境接口的地方，开发时就是本机的地址，端口号就是你配置的webpack端口号})b，对于本地test.env.js打包文件修改'usestrict'constmerge=require('webpack-merge')consttestEnv=require('./test.env');module.exports=merge(testEnv,{NODE_ENV:'"test"',//这个测??试对应上面的测试"build:test":"cross-envenv_config=testnodebuild/build.js",BASE_API:'"//192.168.31.164:89"',//这个就是我要部署到本地的ngx给??别人使用，ngx配置89端口})c,配置'usestrict'module.exports={NODE_ENV:'"production"',BASE_API:'"//mm.awsl用于在线制作。com"'//配置生产地址，这个地址是你上线后自己服务器的地址，端口号是你上线后开启的nginx监听端口号，如果后台运维同事配置了一个这个时候给你的域名，你可以写如果他们不给你他们给你的域名，就写这个在线服务器的ip地址（你写外网的ip地址，你会用你同事服务器的内网ip稍后）}5、修改webpack.prod.config.js//constenv=require('../config/prod.env')把原句注释掉，使用如下配置constenv=process.env.NODE_ENV=require(`../config/${process.env.env_config}.env`);6.如果使用axios，那么在main.js中配置baseURlif(process.env.NODE_ENV=="development"){//如果是开发环境axios.defaults.baseURL='http:'+process.env.BASE_API+'/api';}else{//线上生产环境axios.defaults.baseURL='http:'+process.env.BASE_API;}7、最后打包使用时，npmrunbuild:test/prod如下Onlinenginx配置，配置这个需要准备2个工具，一个xftp（更新资源文件），一个xshell（操作服务器）；向运维同事要服务器的密码和登录名，然后登录xshell，也可以让他们代劳。总之，xftp和xshell都是先连接8号服务器。关于nginx的配置，一般nginx只需要注意两点。一个是你的ngx项目的资源防护位置（路径），一个是请求代理转发的配置。我们对ngx的配置在nginx.conf文件夹中。如果你的服务器没有安装ngx，先安装ngx；以Ubuntu为例，运行sudoapt-getupdatesudoapt-getinstallnginx可以安装ngx；默认安装在/etc/nginx/路径下，我们主要要配置的nginx.conf也在这个路径下；9、在ngx.conf文件选项中配置http，我们的项目配置基本都在这个选项中；如果你会操作vim，你可以直接在xhell中写配置命令，如果你不熟悉，你可以直接在xftp中找到这个文件，右键，选择打开方式，使用你本机安装的编辑器编辑这个文件，编辑完ctrl+s保存，和你用vim一样//##这个是配置代理转发请求地址，这里是你要的Request界面，翻起来看点下的stepc4上面说的同事在线服务器的内网ip就是这个upstreamwebServer{server172.21.16.158:8080;}server{listen80;字符集utf-8；//这里一定要和上面第4点下面步骤c中的`BASE_API`保持一致，你那里写ip，这里写ip，那里写域名，这里也一定要写域名，否则就是报跨域错误server_namemm.awsl.com；地方化/{root/var/www/html/myApp/dist/;//这里是你打包项目的位置。这个配置的意思是访问mm.awsl.com:80就是指向这个目录索引index.html；}//这个配置是一个转发代理。一般（至少我们这样）后台请求接口都会有一个统一的前缀，比如'/web/aa','/web/bb','/web/cc'，这一段的意思是使用'webServer'配置请求所有请求，如'/web/'；事实上，这个配置和你本地项目'/config/index'中的'proxyTable'是一样的；位置/网络/{#includeuwsgi_params；proxy_passhttp://webServer;}}以上是一个演示，如果没有特殊要求，这个配置应该没问题，至少我的是这样的；以上配置完成后，使用xshell重启点击ngx即可；nginx-c/etc/nginx/nginx.conf-sreload至此，你的整个前端打包上线过程就完成了；然后就可以去浏览器打开mm.awsl.com了，如果你没有配置域名，就用你配置的ip，效果是一样的；以上内容本地配置部分参考原文地址。以上就是我第一个项目布局的全过程。希望对您有所帮助。如有错误请指正，谢谢Endless
