首页 IT程序员内容详情

vue打包运行并解决404问题

2021-03-31 53535 编程艺术家
vue打包运行并解决404问题

站点名称:vue打包运行并解决404问题

所属分类:IT程序员

相关标签: # vue

官方网址:

SEO查询: 爱站网 站长工具

进入网站

站点介绍

vue使用npm run build 就能打包,生成一个dist文件,直接打开index.html是不行的,我们需要将其放到一个容器中


1.安装express-generator生成器。


npm install express-generator -g 


2.找个地方创建一个express项目。


express name        // name是项目名


3.进入项目目录,安装相关项目依赖。


cd name


npm install 


4.将打包生成的dist文件夹下的所有文件复制到express项目文件夹下面,然后运行  npm start 来启动express项目。


5.在浏览器输入localhost:3000(3000是自己设置的端口号)就行了。


这时是可以看到页面,但是我们刷新页面可能出现404,我的是nginx配置问题,解决方法如下


如果不是这个问题可以参考另外的几篇文章


Vue项目上线后刷新报错404问题(apache,nginx,tomcat 


Vue build打包之后,刷新页面出现404解决方案


解决:设置history模式并配置nginx


vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。


如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。


const router = new VueRouter({

mode: 'history',

routes: [...]

})

这种模式还需要后台支持,因为我们的因该是个单页客户端应用,如果后台没有正确配置,当用户浏览时就会返回404,配置nginx


 

server { 

  listen   80; 

  server_name localhost; 

  index index.html; 

  root /root/dist; 

  location / { 

    root /root/dist; 

    try_files $uri $uri/ /index.html =404; 

  } 

 

————————————————

版权声明:本文为CSDN博主「console.log( )」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/KingJordon/article/details/103194247


浏览统计(最近30天)

 暂无评论,快来抢沙发吧~

发布评论