vue+nginx 多个项目共用同个域名和端口
vue 配置修改config->index.js中原build为
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}改为
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/test/', /*如果存在图片等静态资源,后面这个/必须要否则有些图片无法加载到 */
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}然后修改vue 路由配置base或者你的每个路由都已经带上了test为前缀
export default new Router({
base: 'test',
mode: 'history',
routes: [
{
path: '/packup/submit/:share/:id',
name: 'submit',
component: GdPackReplaceSubmit
},
{
path: '/packup/index/:share',
name: 'index',
component: GdPackReplaceMain
}, {
path: '/mobilecard/sxyd/index',
name: 'mobileCardIndex',
component: MobileCardIndex
}, {
path: '/mobilecard/sxyd/personinfo/:productId',
name: 'personalInfo',
component: PersonalInfo
}, {
path: '/mobilecard/sxyd/postcard',
name: 'postCard',
component: PostCard
}, {
path: '/mobilecard/sxyd/submitinfo',
name: 'submitInfo',
component: SubmitInfo
}
]
})或者
export default new Router({
mode: 'history',
routes: [
{
path: '/test/packup/submit/:share/:id',
name: 'submit',
component: GdPackReplaceSubmit
},
{
path: '/test/packup/index/:share',
name: 'index',
component: GdPackReplaceMain
}, {
path: '/test/mobilecard/sxyd/index',
name: 'mobileCardIndex',
component: MobileCardIndex
}, {
path: '/test/mobilecard/sxyd/personinfo/:productId',
name: 'personalInfo',
component: PersonalInfo
}, {
path: '/test/mobilecard/sxyd/postcard',
name: 'postCard',
component: PostCard
}, {
path: '/test/mobilecard/sxyd/submitinfo',
name: 'submitInfo',
component: SubmitInfo
}
]
})接下来配置nginx的配置文件,这里连个项目分别都放在了 /home下 ,其他地方无需改变,需要改变server里面添加路由头匹配规则即可(感觉好像在linux中使用nginx的时候静态文件必须在/home一样而且多包几层也会出现问题)
server {
listen 9999;
server_name localhost;
root /home;
location /api {
proxy_pass http://localhost:9090;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /test{
try_files $uri $uri/ /test/index.html last;
index index.html;
}
location /te{
try_files $uri $uri/ /te/index.html last;
index index.html;
}
location @router{
rewrite ^.*$ /index.html last;
}
}这样就可以实现使用相同域名相同端口号,访问不同项目,可以通过路由头来进行区分访问的项目