我在这里

🏠 HOME 🗂️ DOCS 🔗 LINK 👴🏻 ABOUT

React.js Vue.js 项目部署页面刷新404

2018-04-11 11:53

  • 笔记
  • nginx
  • vue
  • react

使用react,vue等开发的项目因为是前后端分离,所有打包发布到服务器以后,需要放在一个静态服务器中运行

配置Nginx服务器:
cd /etc/nginx/conf.d
vim demo.confg

添加如下信息:

server {
    listen 	80;
    server_name your.domain.com;

    location / {
        try_files $uri $uri/ /index.html;
        root   your project path;
        index  index.html index.htm;
    }
}
重启Nginx:
service nginx restart

重启以后访问你的域名或者IP就可以正常访问项目

注意事项:

当你使用了react-router的browserHistory模式或者使用了vue-router的history模式刷新页面会出现404的情况

解决方法:

修改Nginx配置信息如下:

location / {
        try_files $uri $uri/ /index.html;
}

原理:

因为我们的项目只有一个根入口,当输入类似/home的url时,找不到这个页面,这时nginx会尝试加载index.html,加载index.html之后,react-router或vue-router就能起作用并匹配我们输入的/home路由,从而显示正确的home页面

参考地址:https://segmentfault.com/q/1010000005155831

mongodb导入导出数据

2018-04-13 17:42

『印象 - 春』

2018-03-14 09:44

Sukoshi

Sukoshi

不觉得鹿角即可爱又有攻击性吗(

Related Posts

  • 在CSS变量中使用SCSS变量无效
  • CSS使用字体新姿势 unicode-range用法与使用场景
  • ES6中的模块
  • zsh和oh-my-zsh常用配置和命令
  • 日语五十音
  • 五十音补充笔记

Categories

  • 笔记 20
  • 归档记录 9
  • 碎碎念 8
  • QAQ 7
  • doc 6
  • mv 3
show all

Tags

摄影 日常 js 浪 mongodb 日记 碎碎念 canvas cos css git github
show all

© 2022 Sukoshi.

蜀ICP备15014309号

Powered by Hugo Theme - kagome

🌞 light 🌛 dark 🤖️ auto