vue history 打包访问空白

如果你在使用 Vue Router 的 history 模式进行打包后，访问页面出现空白的情况，可能是因为服务器没有正确地配置路由。

在使用 history 模式时，路由的改变会通过 HTML5 History API 来修改地址栏的 URL，从而实现无刷新页面的跳转。但是这种模式需要服务器的支持才能正常工作。

如果你使用的是 Apache 服务器，可以在 .htaccess 文件中添加以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这个规则会将所有不存在的文件和目录都重定向到 index.html，从而让 Vue Router 处理路由。

如果你使用的是 Nginx 服务器，可以在配置文件中添加以下规则：

location / {
  try_files $uri $uri/ /index.html;
}

这个规则会尝试查找请求的文件或目录，如果没有找到就跳转到 index.html。

在配置完服务器后，重新打包并上传至服务器，就应该可以正常访问了。

相关问题

vue3 history路由打包空白

Vue.js 是一种流行的 JavaScript 框架，通过它能开发快速、优化和健壮的单页应用程序。Vue.js 3 是新版的 Vue.js，目前已经发布了 beta 版本，并且有很多新特性让它比以前的版本更强大和更易于使用。

在 Vue.js 3 中，官方提供了一个新的路由器 API，叫做 history 路由，它使用 HTML5 的 history API 来导航单页应用程序。这个 API 使得开发者可以使用 Vue.js 3 与单页应用程序更加深入地交互。

然而，有时候在打包 Vue.js 3 应用程序时可能会遇到 history 路由打包空白的问题。这个问题的出现可能是因为在打包应用程序时，Webpack 没有正确地配置输出路径。具体来说就是，Webpack 没有设置 publicPath 选项。

PublicPath 选项是一个配置选项，它定义了应用程序文件的 URL 前缀，当应用程序被部署到生产环境并使用不同的 URL 时必须使用它。如果没有设置 publicPath，应用程序的资源文件（如 JavaScript 和 CSS 文件）将被查找在相对路径的根目录下，这可能导致路由页面空白。

为了解决这个问题，需要在 webpack 配置文件中设置 publicPath 选项。你可以从 Vue CLI 的内置配置文件中获取到这个选项，也可以在项目中手动设置它。设置 publicPath 选项后，Webpack 将根据 publicPath 的设置来查找文件路径，从而正确地加载资源文件，保证页面可以正确地呈现。

总之，如果在打包 Vue.js 3 应用程序时遇到了 history 路由打包空白的问题，需要检查 publicPath 选项是否正确地设置了。这样可以从根本上解决问题并保证应用程序正常运行。

vue history访问路由无效

Vue的history模式可以通过浏览器的history.pushState和history.replaceState方法来实现路由切换。当我们在Vue项目中使用history模式时，需要进行一些配置才能使访问路由有效。

首先，在路由配置中，我们需要设置base选项来指定应用程序部署的基础URL。如果我们的应用程序部署在根URL下，可以将base配置为'/':

const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes: [...]
})

接下来，我们需要修改服务器配置，以便在单页应用中正确地处理路由刷新问题。如果我们使用的是Vue CLI创建的项目，并且使用的是Webpack打包工具，可以在该项目的根目录下创建一个vue.config.js文件，并添加如下配置：

module.exports = {
  publicPath: '/',
  devServer: {
    historyApiFallback: true
  }
}

这样配置后，当我们访问一个不存在的路由时，服务器将会返回index.html文件，从而使得Vue应用能够正确加载，并在客户端进行路由切换。

另外，我们还需要确保我们的服务器配置正确。例如，在使用Nginx作为服务器的情况下，需要修改nginx.conf文件，增加如下配置：

server {
  ...
  location / {
    try_files $uri $uri/ /index.html;
  }
  ...
}

这些配置能够解决访问路由无效的问题。希望对您有帮助！