Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >VueJs生产环境部署

VueJs生产环境部署

作者头像
磊哥
发布于 2018-05-08 04:08:18
发布于 2018-05-08 04:08:18
2K00
代码可运行
举报
文章被收录于专栏:王磊的博客王磊的博客
运行总次数:0
代码可运行

  VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点。

  先来看VueJs最终生成的文件目录:

具体的步骤如下:

1.vue项目根目录/config/index.js更改资源生成路径:

  assetsPublicPath:"/项目名/"改为assetsPublicPath:"/"

  解决问题:index.html资源访问不到,资源多一级项目名称的路径。

2.使用 npm run build 命令生成站点,站点为根目录下的dist文件;

3.解决站点刷新时404的问题;

  到这个步骤的时候站点已经能正常访问了,到时不能F5刷新,刷新的时候回报404,仔细观察命令会发现,路径已经变成咱们vue路由里面设置的“虚路径”了,所以肯定会404,这个时候需要在运行服务器上进行设置,把访问不到的路径都指向index.html,这个时候站点就支出刷新了,比如我如果是使用nginx做代理,配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
location / {


  try_files $uri $uri/ /index.html;


}

更多的服务器配置点击:https://github.com/vuejs/vue-router/blob/dev/docs/zh-cn/essentials/history-mode.md

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-05-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是
洗尽了浮华
2018/01/23
1.6K0
vue-route+webpack部署单页路由项目,访问刷新出现404问题
vue-router之hash与history,以及nginx配置
vue-router的路由模式可以通过指定mode属性值控制,可选值:"hash" 、"history"、 "abstract" , 默认:"hash" (浏览器环境) , "abstract" (Node.js 环境)
甜点cc
2023/10/16
2.3K0
vue-router之hash与history,以及nginx配置
Vue路由history模式踩坑记录:nginx配置解决404问题
vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/count 这样的了;
吟风者
2019/07/24
4.8K0
部署使用uniapp开发的h5网站
1.首先在HbuilderX里点击【manifest.json】,然后选择【h5配置】,然后【路由模式】选择history模式(因为微信支付等场景不支持hash模式)
零云
2023/07/24
4.2K0
部署使用uniapp开发的h5网站
解决vuejs应用在nginx非根目录下部署时访问404的问题
以往部署vuejs应用都是直接在nginx的location为/下直接部署,这次遇到要将vue应用部署在/vuejs-admin的非根下,使用以往部署方案直接访问就会404,这时修改步骤如下: 1、修
用户1141560
2018/07/03
3.4K1
nginx 去除井号操作
history 的这种模式需要后台配置支持,将 model 设置为 history 的 时候,打开项目主页,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会出现404。
White feathe
2021/12/08
1.3K0
vue-router的hash模式和history模式
开发中一直在用 vue,也知道 Vue Router 有 hash 和 history 两种模式,hash 模式路径中会带上 # 符号,看着不美观;history 模式路径中则没有 #,路径看着更漂亮,但是需要服务器配合设置,所以我们项目中一般都是使用 history 模式。之前对于 的理解也就限于这些了,后面学了服务器部署、nginx这些但还是一知半解。
人人都是码农
2023/11/16
3970
Linux环境 使用Docker部署Vue项目
1.无法通过路由请求页面,报nginx404,参考default.conf文件的配置
果冻程序
2024/06/05
3590
Linux环境 使用Docker部署Vue项目
Umi&React打包部署到非根目录及刷新报错404的问题解决
在开发中可能一个项目包含多个子项目,如前端项目和后台管理的项目放在同一个服务器目录中。
德顺
2021/08/03
5.2K0
Vue项目部署问题及解决方案
Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式。
半指温柔乐
2019/02/25
2.1K0
告别 hash 路由,迎接 history 路由
在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~
Krry
2019/03/02
1.6K0
vue项目代码部署发布总结
在一般情况下,vue项目代码部署发布只需将代码打包后直接上传到服务器即可。但在一个比较彻底的前后端分离业务中,这样的操作就行不通了,这篇文章将重点针对这种情况做分析总结。
挥刀北上
2019/08/06
1.8K0
vue项目代码部署发布总结
Vue下路由History mode导致页面无法渲染的原因
用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。
全栈程序员站长
2022/07/07
8870
Vue下路由History mode导致页面无法渲染的原因
Vue项目预渲染机制引入实践
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T
前端下午茶
2018/10/22
2K0
【Vue Router】009-HTML5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。该模式是通过调用 createWebHashHistory() 函数创建的,这会在 URL 中使用 “#” 来标识要跳转目标的路径,如果你觉得这样很难看,可以使用 HTML5 History 模式。
訾博ZiBo
2025/01/06
720
Vue3项目Build后部署在Nginx上F5刷新页面空白或404
使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后,首页能正常访问菜单内点击切换也没有问题,但当你刷新页面后,则出现 404 Not Found,故在此记录一下解决办法
骤雨重山
2023/08/13
3.4K0
Vue+Django+Nginx+uWSGI部署生产环境 前后端分离
这一步仅仅是为了验证wsgi和django是否都能正常使用,正常部署并不是用这种方法
Autooooooo
2020/11/09
5.6K2
Vue+Django+Nginx+uWSGI部署生产环境 前后端分离
解决Vue CLI3 项目部署到非根目录下刷新空白问题
如果你的前端项目使用Vue+Vue CLI开发,部署到服务器上你一定会遇到以下几个场景:
前端逗逗飞
2021/04/29
2.2K0
解决Vue CLI3 项目部署到非根目录下刷新空白问题
vue-cli打包之后的项目在nginx的部署
vue-cli执行 npm run build 进行打包,生成dist文件夹,把该文件夹下的文件直接复制到nginx服务器目录下,就可打开项目,但是只有首页是可以看到的,再刷新一下就404了,原因是vue的项目为单页应用,路由找不到所致。所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下,这样就都能找到路由了。 location / { try_files $uri $uri/ @router; index index.html; } lo
蓓蕾心晴
2018/04/12
2.1K0
面试官:vue项目如何部署?有遇到布署服务器后刷新404问题吗?
前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
@超人
2021/02/26
8.4K0
面试官:vue项目如何部署?有遇到布署服务器后刷新404问题吗?
相关推荐
vue-route+webpack部署单页路由项目,访问刷新出现404问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验