vue2和vue3 部署打包到线上子目录的区别

本文是讲解子目录

我提供的代码和配置主要是关于 Vue 2 和 Vue 3 应用如何部署在子目录中。我会为您逐一解释这些内容。

vue2部署打包到子目录

1. 在 Vue 2 中，您需要设置 base 属性来指定应用的基路径。在您的示例中，您设置的是 /h5/。
2. mode: ‘history’ 是为了去掉 URL 中的 #。使用 history 模式可以让 URL 更友好、更现代。
3. publicPath 是 webpack 的一个配置项，用于指定构建后的资源的基础路径。在生产环境下，它被设置为 /h5/，意味着构建后的资源会被放在这个路径下

const router = new Router({
  mode: 'history', // 去掉url中的#
  base:'/h5/',
  })

publicPath: process.env.NODE_ENV === 'production' ? '/h5/' : '/',

vue3部署打包到子目录

1. 在 Vue 3 中，路由配置方式有所变化。您需要使用 createRouter 和 createWebHistory。createWebHistory 的参数指定了应用的基本路径为 /h5/。
2. 另外，与 Vue 2 类似，Vue 3 也使用 publicPath 来指定构建后的资源的基础路径。但在这里，它基于环境变量 VITE_APP_ENV 来决定是 / 还是 /h5/。

const router = createRouter({
  history: createWebHistory('/h5/'),
});

// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/h5/，则设置 baseUrl 为 /h5/。
base: VITE_APP_ENV === 'production' ? '/h5/' : '/',

vue3已经没有mode那个属性了，直接用history属性

createWebHistory是一个用于创建基于Web浏览器的历史记录管理的Vue Router辅助函数。在Vue Router中，有两种常见的历史记录模式：createWebHistory和createHashHistory。

• createWebHistory: 创建一个基于HTML5 History API的历史记录管理，它使用浏览器的历史记录进行路由跳转，并且不会在URL中显示哈希值。它提供了更符合现代Web应用体验的路由方式，因为URL更加友好且易于分享。
• createHashHistory: 创建一个基于哈希模式的历史记录管理，它使用URL中的哈希部分进行路由跳转。在早期的Web应用中，这是常见的路由方式，但现代应用通常更倾向于使用createWebHistory。

nginx 子目录示例

    location /h5/{
       alias /home/xx/xx/xx/h5/;
       index  index.html;
       try_files $uri $uri/ /h5/index.html;
    }

1. 这是关于如何配置 nginx 来为 Vue 应用提供子目录支持的示例。当应用被部署在子目录时，您需要告诉 nginx
   如何正确地提供静态资源。

2. location /h5/ 定义了一个新的 location，该 location 会匹配以 /h5/ 开头的任何请求。

3. alias /home/xx/xx/xx/h5/; 指定了实际的文件路径，确保 nginx 可以找到应用的静态资源。

4. index index.html; 和 try_files $uri $uri/ /h5/index.html; 是为了确保当请求一个目录时，nginx 会默认提供 index.html 文件。这对于单页应用（SPA）是必要的，因为所有的路由都映射到同一个 index.html 文件。

总的来说，当我将 Vue 应用部署到子目录时，关键是要确保前端和后端都能正确地处理这种部署方式，特别是对于前端路由和静态资源的提供。