1、vue项目进行打包前的修改(以两个vue项目为例)
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
}
]
})
nginx配置
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;
}
}
}
