天下配置千千万,每个都不尽相同,上面只是我集体的配置办法;老手敌人仅作参考,如有谬误心愿斧正,感激不尽!

在咱们理论的我的项目开发中，可能有多个部署环境，测试环境，预发环境，正式环境。每个环境的申请URL都不同，每次打包时手动更换很麻烦，此时就须要配置多环境打包。

1,装置cross-env

npm install  cross-env --save

2,批改package.json

"scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    //"build": "node build/build.js" 本来是这样的,咱们须要正文这一句,应用上面咱们的自定义命令    "build:test": "cross-env env_config=test node build/build.js",    "build:prod": "cross-env env_config=prod node build/build.js"},

3,批改build.js

//1,正文// process.env.NODE_ENV = 'production'....//省略两头配置const webpackConfig = require('./webpack.prod.conf')//2,正文//const spinner = ora('building for production...')//这里是批改，读取设置的变量const spinner = ora('building for ' + process.env.env_config);spinner.start()

4,在config文件夹下新建test.env.js 和 prod.env.js 同理，设置不同的BaseURL

比方我的我的项目只须要3个环境,一个开发,一个本地测试(有可能你会遇到先把我的项目部署到你本地的ngx,不便他人应用),一个线上生产 ,上面只是一个示例

a,首先对dev.env.js批改

'use strict'const merge = require('webpack-merge')const dev = require('./dev.env')module.exports = merge(dev, {    NODE_ENV: '"development"',    BASE_API: '"//192.168.31.164:8081"', // 这里就是配置开发环境接口的中央,在开发时候就是本地机器的地址,端口号就是你配置的webpack 端口号})

b,对test.env.js 本地打包文件批改

'use strict'const merge = require('webpack-merge')const testEnv = require('./test.env');module.exports = merge(testEnv, {    NODE_ENV: '"test"', //这个test 对应的就是下面 "build:test": "cross-env env_config=test node build/build.js", 的test;    BASE_API: '"//192.168.31.164:89"', // 这个是我要部署到本地ngx给他人应用的,ngx 配置的是89端口})

c,对线上生产配置

'use strict'module.exports = {    NODE_ENV: '"production"',    BASE_API: '"//mm.awsl.com"' // 配置生产地址 ,这个地址是上线后本人服务器的地址,端口号是你上线后开的nginx 监听端口号,如果这时候后盾运维共事有给你配置好了的域名你就写他们给你的域名,没有给你就写这台线上服务器ip地址(是写外网ip,待会儿还要用到一个你共事服务器的内网ip)}

5,批改webpack.prod.config.js

//const env = require('../config/prod.env') 正文掉本来这一句,应用上面的配置const env = process.env.NODE_ENV = require(`../config/${process.env.env_config}.env`);

6,如果应用axios,那么在main.js 外面配置一下baseURl就行了

if (process.env.NODE_ENV == "development") { //如果是开发环境  axios.defaults.baseURL = 'http:' + process.env.BASE_API + '/api';} else { //线上生产环境  axios.defaults.baseURL = 'http:' + process.env.BASE_API;}

7,最初打包应用的时候 npm run build:test/prod就能够了

以下为线上nginx的配置,配置这个你须要筹备2个工具,一个xftp(更新资源文件),一个xshell(操作服务器);向运维共事要到对于服务器的明码,登录名,而后在xshell 外面登录进去,或者你就让他们给你弄一下,总之先xftp和xshell都先连进去服务器

8,对于nginx的配置

一般来说nginx的只须要留神两点,一个是你ngx 我的项目的资源避免地位(门路),另一个就是申请代理转发的配置,
咱们对ngx的配置都是在 nginx.conf 这个文件夹外面,如果你的服务器没有装置ngx 就先装置一下ngx;

以Ubuntu为例,运行

sudo apt-get updatesudo apt-get install nginx

即可装置ngx;默认状况下都是装置在/etc/nginx/这个门路下,咱们次要要配置的nginx.conf 也在这个门路下;

9,配置ngx.conf文件里的 http 选项,咱们的我的项目配置根本都在在这个选项外面; 如果你会vim的操作,你就能够间接在xhell间接外面写配置命令,如果你不相熟的话能够间接在xftp 外面找到这个文件,右键,抉择打开方式,应用你本地机器装置的编辑器去编辑这个文件,编辑实现ctrl+s 保留就行了,跟你应用vim是一样的

// ## 这是配置代理转发申请地址,这里写的是你要申请接口,翻上去看下面的第4点上面的c步骤,下面说到的还须要的共事线上服务器的内网ip 就是这个upstream webServer{          server 172.21.16.158:8080;}server {                 listen 80;    charset utf-8;    //这里肯定和下面第4点上面的c步骤外面的`BASE_API` 保持一致,那里写的ip,你这里就写ip,那里写的域名,这里也肯定写域名,否则就会报跨域谬误    server_name mm.awsl.com;     location / {        root /var/www/html/myApp/dist/; //这里是放的是你的打包好的我的项目地位, 这段配置的意思就是拜访mm.awsl.com:80就是指向这个目录        index index.html;    }    //这段配置是转发代理,个别(至多咱们是这样)后盾申请接口都会有一个对立的前缀,比如'/web/aa','/web/bb','/web/cc' 这样的,这段意思就是把所有'/web/' 这样的申请都应用'webServer'配置去申请;其实这个配置就是跟你本地我的项目'/config/index' 外面的'proxyTable'一个意思;    location /web/ {        #include uwsgi_params;        proxy_pass http://webServer;    }}

下面就是一个示范,如果没什么非凡需要,这样配置应该就能够了,至多我的是这样;

下面的配置都实现之后利用xshell重启一下ngx 就行了;

nginx -c /etc/nginx/nginx.conf -s reload

至此,你的整个前台打包上线流程实现;接下来就能够去浏览器外面关上mm.awsl.com了,如果你没配置域名,就用你配置的ip,也是一样的成果;

以上内容本地配置局部参考 原文地址

下面都是我第一次安排我的项目的全流程,心愿对你有所帮忙,如有谬误,欢送斧正,感激不尽