乐趣区

关于vue.js:纯新手向vuewebpacknginx项目从打包到上线流程

jiezi

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

在咱们理论的我的项目开发中，可能有多个部署环境，测试环境，预发环境，正式环境。每个环境的申请 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 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, 也是一样的成果;

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

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

退出移动版