在工作當(dāng)中，有很多前端項(xiàng)目，但是不可能每一個(gè)項(xiàng)目都配一個(gè)nginx 或者服務(wù)器，那么就會(huì)產(chǎn)生一個(gè)nginx上面配置多個(gè)前端項(xiàng)目。
下面是我在工作中的一些問(wèn)題?，F(xiàn)在服務(wù)器上有一個(gè)nginx 并且也在線上運(yùn)行，現(xiàn)在要再加一個(gè)項(xiàng)目上去，按照正常的邏輯進(jìn)行配置，但是怎么也上不去，同時(shí)在網(wǎng)上也搜了一些資料，最終還是沒(méi)有解決。通過(guò)以下步驟是記錄一臺(tái)nginx同時(shí)跑兩個(gè)項(xiàng)目的記錄。
展示以下兩個(gè)項(xiàng)目文件目錄，其中rootProject是原有的，newProject是要新增的項(xiàng)目
1.在newProject項(xiàng)目的config文件夾內(nèi)的index.js內(nèi)修改(注意是build內(nèi))
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/newProject/',
將”/“更改為"/newProject/"
2.將index.html中的meta標(biāo)簽更改
<!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打包的項(xiàng)目需要更改以下配置，在build/webpack.base.conf.js中
output配置項(xiàng)中，增加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/'
},
同時(shí)需要把圖片配置中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
都已經(jīng)有了如上更改
6.更改nginx配置
首先打開(kāi)nginx.conf，查看原有項(xiàng)目為
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;
}
設(shè)置的是根項(xiàng)目，不用動(dòng)。增加以下配置：
location /newProject {
alias /usr/local/nginx/newProject/;
index index.html index.htm;
try_files $uri $uri/ /lottery/index.html;
}
再配置自己的網(wǎng)絡(luò)訪問(wèn)代理。就完成配置了 ，運(yùn)行./nginx -s reload發(fā)現(xiàn)已經(jīng)可以。
