Apache,Nginx部署vue/react项目
vue项目直接打包发布在服务器上,访问项目非根目录路由,刷新界面的时候,会出现404情况。这是由于服务端不识别vue的路由配置,所以在遇到404的情况,要返回index.html,让vue自己去寻找自己的路由页面。vue打包注意点请看我的另一篇博客:(有一定关联)https://blog.csdn.net/bocongbo/article/details/81670072一、Apach...
·
vue项目直接打包发布在服务器上,访问项目非根目录路由,刷新界面的时候,会出现404情况。这是由于服务端不识别vue的路由配置,所以在遇到404的情况,要返回index.html,让vue自己去寻找自己的路由页面。
vue打包注意点请看我的另一篇博客:(有一定关联)
vue去掉#,history模式_不求甚解bc的博客-CSDN博客_vue 去掉#
一、Apache服务器
1、修改Apache配置文件httpd.conf,并重启Apache
LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#
AllowOverride None,改成AllowOverride All
2、Apache的www/jnwtv-live-cartoon-h5/目录下新建 .htaccess文件, 修改RewriteRule为 /jnwtv-live-cartoon-h5/index.html
如下:(注意:点和反斜杠中间有一个空格,该文件和打包的index.html同级)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /project-name/index.html [L]
</IfModule>
二、Nginx服务器
1、进入Nginx配置文件
cd /etc/nginx/conf.d
2、编辑default.conf配置文件 vim default.conf
server {
listen 80;
server_name localhost;
root /webServer/nginx;
index index.html index.htm;
location /project-name1 {
try_files $uri $uri/ /project-name1/index.html;
}
location /project-name2 {
try_files $uri $uri/ /project-name2/index.html;
}
error_page 404 /404.html;
error_page 500 501 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3、重启Nginx
nginx -s reload
三、其他后台语言
1、把后台404情况,全部返回vue的index.html给客户端,就可以了
2、以nodejs为例
router.get('*', controller.home.index); //写在接口末尾,404全部返回index.html
更多推荐
已为社区贡献23条内容
所有评论(0)