在工作当中，有很多前端项目，但是不可能每一个项目都配一个nginx 或者服务器，那么就会产生一个nginx上面配置多个前端项目。
下面是我在工作中的一些问题。现在服务器上有一个nginx 并且也在线上运行，现在要再加一个项目上去，按照正常的逻辑进行配置，但是怎么也上不去，同时在网上也搜了一些资料，最终还是没有解决。通过以下步骤是记录一台nginx同时跑两个项目的记录。
展示以下两个项目文件目录，其中rootProject是原有的，newProject是要新增的项目
image.png
image.png
1.在newProject项目的config文件夹内的index.js内修改(注意是build内)
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/newProject/',
image.png
将”/“更改为"/newProject/"
2.将index.html中的meta标签更改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta base=/newProject/ >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.在src/router/index.js文件修改,讲路由base属性更改为以下
export default new Router({
//nginx 配置
base: '/newProject/',
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
4.使用webpack打包的项目需要更改以下配置，在build/webpack.base.conf.js中
output配置项中，增加publicPath:'/newProject/'
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
// publicPath: process.env.NODE_ENV === 'production'
// ? config.build.assetsPublicPath
// : config.dev.assetsPublicPath
publicPath:'/newProject/'
},
同时需要把图片配置中options中增加publicPath属性
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
publicPath:'/newProject/',
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
5.查看打包后的在dist生成的打包目录中找到index.html
image.png
都已经有了如上更改
6.更改nginx配置
首先打开nginx.conf，查看原有项目为
location / {
root var/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
# root html;
# index index.html index.htm;
#proxy_intercept_errors on;
#proxy_set_header X-Forwarded-For $remote_addr;
#proxy_set_header X-Forwarded-Host $server_name;
#proxy_set_header Host $host;
#proxy_pass http://localhost;
}
设置的是根项目，不用动。增加以下配置：
location /newProject {
alias /usr/local/nginx/newProject/;
index index.html index.htm;
try_files $uri $uri/ /lottery/index.html;
}
再配置自己的网络访问代理。就完成配置了 ，运行./nginx -s reload发现已经可以。
