vue2 history如何打包

打包 Vue2 历史记录模式（history mode）的应用程序，你需要执行以下步骤：

1. 在你的 Vue CLI 项目中，打开 `vue.config.js` 文件。

2. 在该文件中添加以下配置：

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

3. 确保你的服务器设置了 `fallback` 选项。如果你正在使用 Express，可以使用 `connect-history-api-fallback` 中间件：

const express = require('express')
const history = require('connect-history-api-fallback')

const app = express()

app.use(history())

app.use(express.static('dist'))

app.listen(3000)

4. 最后，使用 `npm run build` 命令打包项目。

这些步骤会生成一个可以在历史模式下运行的 Vue2 应用程序。

相关问题

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 选项是否正确地设置了。这样可以从根本上解决问题并保证应用程序正常运行。