Vue：使用History模式打包时注意事项

Yivisir

于 2020-11-13 12:40:35 发布

阅读量4.6k

点赞数 4

分类专栏：后端前端 vue 文章标签： vue java nginx javascript vue.js

本文链接：https://blog.youkuaiyun.com/yivisir/article/details/109672540

版权

本文详细介绍了在Vue项目中使用History模式打包时需要注意的事项，包括路由配置、生产环境配置、后台Nginx配置以及错误页面的设置，旨在解决因路径问题导致的404错误，确保项目顺利部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue: 使用History模式打包时需要注意的事项

1. 前言

今天在使用history模式打包vue项目，后台部署时遇到了种种问题，特地写一篇博客记录一下。

2. 路由配置

在History模式下，在路由配置文件中首先要将mode改为history;
部署项目时，如果在域名后还有额外路径的话，需要注意添加base，作为每次跳转路由时的前缀；

以下是设置样例：

// router/index.js
export default new Router({
     
    mode : "history",
    base : "/test/dist",			// 项目存放在http://www.xxx.com/test/dist/
    routes : [...]
})

添加了base后，路由跳转时会默认在路径前添加上base的内容，解决了因为路径问题而出现404错误了；

3. 生产环境配置

最低0.47元/天解锁文章