譬如：localhost/buffer执行buffer服务(监听8089端口)，localhost/configure执行configure服务(监听8088端口)。
main.conf文件如下：
configure.conf文件配置如下：（vue+php搭建的web服务）
请求：http//localhost/configure/a/b
若是绝对路径的配置，则请求转化成了 http://localhost:8088/a/b
若是相对路径的配置，则请求转化成了 http://localhost:8088/configure/a/b
http://127.0.0.1/helloworld 第一个vue项目(不用修改配置直接build就可以)
http:// 127.0.0.1 /test02 第二个vue项目(需要修改)
1、首先在config文件夹内的index.js内修改(注意是build内)
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
//nginx配置
assetsPublicPath: '/test2/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
2、这样确保生产出来的文件，在index.html中都是在student下。对index.html文件进行修改，添加base href="/test2/" >
<!DOCTYPE html>
<html>
<head>
<!--新添加的-->
<base href="/test2/" >
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>test1</title>
<link href=/test2/static/css/app.abcac001105f87ab0ad14b37d34bbe9c.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/test2/static/js/manifest.a96262ba9edf9a4c5761.js></script>
<script type=text/javascript src=/test2/static/js/vendor.a6129cab87d1dbebc84c.js></script>
<script type=text/javascript src=/test2/static/js/app.4694a2e388440c566511.js></script>
</body>
</html>
3、在src/router/index.js文件修改，添加 base: '/test2/'
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
base:"/test2/",
mode:"history",
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
user root
worker_processes 1 #nginx进程个数
#worker_cpu_affinity 1000 0100 0010 0001 #绑定worker进程到指定的CPU内核中
#error_log logs/error.log
#error_log logs/error.log notice
#error_log logs/error.log info
#pid logs/nginx.pid
events {
worker_connections 1024 #worker进程的最大连接数是1024
}
http {
#include mime.types
# include /etc/nginx/conf.d/*.conf
default_type application/octet-stream
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"'
#access_log logs/access.log main
sendfile on
#tcp_nopush on
#keepalive_timeout 0
keepalive_timeout 65
upstream rest{
least_conn
server 127.0.0.1:8000
server 127.0.0.1:8001
}
#gzip on
server {
listen 80
server_name 127.0.0.1
#charset koi8-r
#access_log logs/host.access.log main
#vue第一个项目
location / {
root /usr/local/nginx/projects/dist
try_files $uri $uri/ @router
index index.html index.htm
}
#vue第二个项目
location /test2 {
alias /usr/local/nginx/projects/test2/
try_files $uri $uri/ /test2/index.html
index index.html index.htm
}
location @router {
rewrite ^.*$ /index.html last
}
#vue第一个项目后端接口
location /api_a {
#转发到后端uwsgi
proxy_pass http://127.0.0.1:5002
# 设置请求头，并将头信息传递给服务器端
proxy_set_header Host $host
# 设置请求头，传递原始请求ip给 gunicorn 服务器
proxy_set_header X-Real-IP $remote_addr
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for
#
}
#vue第二个项目后端接口
location /api_b {
#转发到后端uwsgi
proxy_pass http://127.0.0.1:5003
# 设置请求头，并将头信息传递给服务器端
proxy_set_header Host $host
# 设置请求头，传递原始请求ip给 gunicorn 服务器
proxy_set_header X-Real-IP $remote_addr
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for
#
}
#error_page 404 /404.html
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html
location = /50x.html {
root html
}
}
}
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）