history 模式，一个根目录下面挂多个站点

一梦荼靡

已于 2025-02-22 16:42:19 修改

阅读量295

点赞数 6

分类专栏：云服务器笔记文章标签： nginx vue.js

于 2025-02-22 16:40:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45133806/article/details/145796921

版权

云服务器笔记专栏收录该内容

5 篇文章

订阅专栏

1、nginx配置

 location /one {
        alias /mnt/new_pro/web/one/dist;  //vue项目所在位置
		try_files $uri $uri/ /one/index.html;  
        index  index.html index.htm;
    }
    # 门店前端
   location /two{
        alias  /mnt/new_pro/web/two/dist;
	   try_files $uri $uri/ /two/index.html;
        index  index.html index.htm;
    }

如果跳转出现404是nginx配置未配置好，
Nginx 会将请求的 URI 完整地附加到 root 指定的路径上；alias 会替换掉 location 中匹配的部分，而不是简单地拼接；
例如，请求http://yourdomain/one/somefile时，root会尝试访问/mnt/new_pro/web/dist/one/somefile；alias 会尝试访问/mnt/new_pro/web/dist/somefile。
2、vue项目路由配置

const createRouter = () => new Router({
  // mode: 'history', // require service support
  mode: 'history', // 去掉url中的#
  base: '/one ',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

3、修改 vue.config.js 的 publicPath

publicPath: '/one /',

问题1：确定是否访问到相关项目
可将dist下的index.html文件的代码替换成以下代码，然后运行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Vue App</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击我</button>
  </div>

  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入入口文件 -->
  <script src="main.js"></script>
</body>
</html>