nginx部署history模式的vue3项目

wlhing457

已于 2022-11-09 16:29:59 修改

阅读量3k

点赞数 1

文章标签： nginx vue.js 运维

于 2022-10-17 15:43:56 首次发布

本文链接：https://blog.csdn.net/qq_40712430/article/details/127364943

版权

本文介绍了如何在nginx上部署使用history模式的Vue3项目，包括选择history模式路由、设置环境变量、修改publicPath、进行nginx配置以及访问线上地址验证的步骤。

摘要由CSDN通过智能技术生成

1. 选择history模式路由

在创建项目时选择history模式，或者在路由文件里面修改成history模式


// process.env.VUE_APP_BASE_URL为部署的文件夹路径
const router = createRouter({
  history: createWebHistory(process.env.VUE_APP_BASE_URL),
  routes,
});

2. 设置环境变量

在根目录新建.env.development文件和.env.production文件。在环境变量文件里面设置的变量最好以VUE_APP_开头，以下为官网原话.

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

// .env.development文件
VUE_APP_BASE_URL=/wlhao/vue3app

// .env.production文件
VUE_APP_BASE_URL=<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wlhing457

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
nginx部署history模式的vue3项目

nginx部署history模式的vue3项目
复制链接

扫一扫

在nginx上部署vue项目(history模式)的方法

08-28

总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...

vue路由history模式下的nginx配置

胡西风的博客

04-02

1856

vue路由 history模式 nginx配置

1 条评论您还未登录，请先登录后发表或查看评论

vue3 history模式配置及nginx服务器配置

最新发布

qq_52686989的博客

07-02

751

上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting，这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。

Nginx 解决nginx配置vue.router项目在createWebHistory模式下访问404问题

Tongyao

01-12

1007

【代码】解决nginx配置vue.router项目在createWebHistory模式下访问404问题。

解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题

weixin_54931655的博客

07-07

3425

总之，要解决使用Nginx部署上线，单页面使用history模式，刷新出现404问题，我们需要对Nginx进行配置，以便支持history模式。history模式是HTML5提供的一种前端路由模式，它使用HTML5的history API来实现前端路由，可以使得单页面应用在不刷新页面的情况下进行路由跳转。当用户刷新页面时，Nginx会将请求重定向到index.html文件，然后由前端路由来处理请求，使得用户可以正常访问页面。用户需要解决这个问题，使得单页面应用在使用history模式时，可以正常刷新页面。

Vue History模式的Nginx配置

宁静致远

11-21

2980

vue history模式下的Nginx配置说明

Nginx与history路由模式：刷新页面404问题

席木木的博客

02-08

4434

Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决

vue项目部署到nginx/tomcat服务器的实现

10-16

总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...

nginx 部署 vue 项目找不到js css文件的解决方法

09-29

在使用nginx部署Vue项目时，有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法，主要包括vue-cli@3的配置方式和vue-...

Vue项目部署Nginx配置文件 SSL

08-11

# 处理 Vue 路由的history模式 } ``` 7. **错误页面处理**： - 你还可以配置自定义的错误页面，例如 404 或 500 错误。 ```nginx error_page 404 /404.html; error_page 500 /500.html; ``` 完成以上配置...

Vue3 根据路由（history 和hash 两种方式）发布到Nginx 配置二级目录

u014212540的博客

04-13

3262

Vue3 nginx 二级目录

从0-1超详细教你使用nginx打包部署静态资源,以及hash和history配置汇总

tangdou369098655的博客

03-10

2064

首先呢，我们要有以下几个方面的知识和操作，来实现项目部署 ## 第一：我们要搭建nginx部署基础环境 ### 具体流程可参考这个链接[从0-1超详细教你实现前端代码nginx部署全流程](https://blog.csdn.net/tangdou369098655/article/details/106318268) 第二：我们要知道前端路由hash和history实现以及区别

nginx通用history模式刷新

u013008898的博客

03-02

400

nginx通用history模式刷新

Vue3+Vite+history模式+Nginx 部署二级路径

weixin_43422861的博客

11-08

2583

vite+vue3+history

react及vue前端项目使用history路由部署nginx 404踩坑问题

cdy_1的博客

07-08

824

这么一看是不是觉得没啥问题了，但是但是问题来了，结果虽然是跳转我项目的index.html了，但还是没匹配到我的路由，比如我跳转home页，他给我跳转我项目自己的404页了，出现了下面这个玩意儿。但是由于我的比较特殊，我是部署多个项目的也就是说文件结构是下面这种，像刚才那种配置的话就会跳转到根目录的index.html了，显然不是我想要的。我的配置就是这样，然后就好了，所有针对部署多个项目的情况应该这么配置，注意这个名字要和nginx里的那个文件夹名字一样。一种是哈希路由，其原理就是通过哈希值跳转。

Nginx实现Vue部署，History模式发布

qq_45874251的博客

08-01

164

【代码】Nginx实现Vue部署，History模式发布。

vue路由 history模式 nginx配置

m0_50015961的博客

03-03

5279

vue 路由history模式nginx配置

在nginx上部署vue2/vue3项目(history模式)

qq_41231694的博客

03-27

6549

1、vue项目路由history模式配置(vue2和vue3整个配置就这一步不一样) vue2配置 const router = new Router({ mode: 'history', // 访问路径不带井号需要使用 history模式 base: '/bank/page', // 基础路径 routes: [ { path: '/count', name: 'count', component: resolve => require(

在nginx上部署vue项目(history模式)

08-30

在Nginx上部署Vue项目（使用history模式）需要进行以下步骤： 1. 安装Nginx：首先确保已经在服务器上安装了Nginx，可以使用包管理器（如apt、yum等）进行安装。安装完成后，启动Nginx服务。 2. 构建Vue项目：在本地开发环境中使用Vue CLI构建好的Vue项目，使用以下命令构建： ``` npm run build ``` 此命令将生成一个`dist`目录，包含了打包好的静态资源。 3. 配置Nginx：找到Nginx的配置文件，默认路径为`/etc/nginx/nginx.conf`，使用文本编辑器打开进行编辑。 4. 在Nginx的配置文件中找到`location /`的块，并将其替换为以下内容： ``` location / { try_files $uri $uri/ /index.html; } ``` 这段配置代码的作用是将所有的URL请求重定向到`index.html`文件，因为Vue项目是一个单页应用，所有的页面都由`index.html`和JavaScript文件来管理。 5. 配置代理（可选）：如果Vue项目需要与后端API进行通信，可以将API请求代理到后端服务器。在Nginx配置文件的`location /`块后面，添加以下内容： ``` location /api/ { proxy_pass http://backend-server; } ``` 将`backend-server`替换为实际的后端服务器地址。 6. 保存并退出Nginx配置文件。重新加载Nginx配置，使更改生效： ``` nginx -s reload ``` 现在，Vue项目已经成功部署在Nginx上，并且可以通过服务器的IP地址或域名进行访问。使用history模式的Vue路由器可以正常工作，并且URL不会显示`/#/`的哈希标记。