天下配置千千万,每个都不尽相同,下面只是我个人的配置方法;新手朋友仅作参考,如有错误希望指正,感激不尽!
在我们实际的项目开发中，可能有多个部署环境，测试环境，预发环境，正式环境。每个环境的请求URL都不同，每次打包时手动更换很麻烦，此时就需要配置多环境打包。
1,安装cross-env
npm install cross-env --save2,修改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 update
sudo 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,也是一样的效果;
以上内容本地配置部分参考 原文地址
上面都是我第一次布置项目的全流程,希望对你有所帮助,如有错误,欢迎指正,感激不尽