Vue history模式项目发布

nginx部署vue项目

server {
    #前端页面访问地址端口（可根据实际修改）
    listen       4343;
    server_name  localhost;

    location /file {
        root   /opt/;
        autoindex on;
    }

    #/dev-api 对接后台接口地址/dev-api
    location /dev-api {
        client_max_body_size    20m;
        #后端部署文件对应的地址
        proxy_pass http://0.0.0.0:8080;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # 重写路径
        #rewrite ^/dev-api/(.*) /$1 break;
    }
     location / {
        #前端应用放置目录（可根据实际修改）
        root /opt/web_app/myapp/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

nodejs 管理 pm2部署vue项目

脚本使用了express框架,需要生成一个package.json，再依赖项添加进去
配置 package.json:

{
  "name": "vue-elm-dist",
  "version": "1.0.0",
  "description": "",
  "main": "prod.server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3"
  }
}

启动文件 prod.server.js:

var express = require('express');
var config = require('./config/index');
const fs = require('fs');
const path = require('path');
const proxy = require('http-proxy-middleware')
var port = 4343 || process.env.PORT || config.build.port;
var app = express();
var router = express.Router();

router.get('/', function (req, res, next) {
        req.url = '/index.html';
        next();
});

router.get('/gov', function (req, res, next) {
        req.url = '/gov.html';
        next();
});

router.get('/login', function (req, res, next) {
        req.url = '/index.html';
        next();
});

app.use('/dev-api', proxy({
        'target': 'http://0.0.0.0:7777',
        'secure': false,
        'changeOrigin': true,
        'logLevel': 'debug',
        'cookieDomainRewrite': {
                "*": ""
        }
}))

app.use('/abc', proxy({
        'target': 'http://0.0.0.0:8085',
        'secure': false,
        'changeOrigin': true,
        'logLevel': 'debug',
        'cookieDomainRewrite': {
                "*": ""
        },
        'pathRewrite': { '^/abc': '/' }
}))

app.use(router);

app.use(express.static('./dist'));

app.get('*', function (req, res) {
        const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
        res.send(html)
})
module.exports = app.listen(port, function (err) {
        if (err) {
                console.log(err);
                return
        }
        console.log('Listening at http://localhost:' + port + '\n')
});

目录大概：

pm2 list：查看所有运行的node服务进程状态
pm2 stop app_name | app_id ：停止某进程服务
pm2 start prod.server.js --name my-project ：命名进程