当前位置: 首页 > Web前端 > vue.js

如何将vue项目部署到服务器(Apache)

时间:2023-03-31 23:55:00 vue.js

开发环境下的vue项目,通过npmrundev命令让项目运行起来,原理是在本地搭建一个expressserver。但是在服务器上,必须使用npmrunbuild命令来打包整个项目。打包后会在项目目录下生成一个dist文件夹:如果直接把dist文件直接放在服务器上。这个文件目录是经过处理的目录文件,可以正常打开。我在这个服务器使用的文件名是ak,遇到的问题和需要处理的问题如下:配置路由配置vue.config.jsApache服务器配置.htaccess文件1.配置路由,我这里使用historyconstrouter=newVueRouter({routes,mode:'history',base:'/ak'})配置vue.config.js,我这里的vue-cli是3.x以上的,都需要手动配置//vue.config。jsmodule.exports={publicPath:'./',}这里的配置可以在服务器打开,但是只要刷新一下,页面就会丢失。所以在服务器中配置.htaccess文件。配置.htaccess文件RewriteEngineOnRewriteBase/ak/RewriteRule^index\.html$-[L]RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-d重写规则。/ak/索引。html[L]#这个配置的作用是将服务器上不存在的所有请求转发给index.html。这里如何放置其他文件,将对应的ak文件替换成需要的文件即可。一般来说,只要掌握以上3个步骤,就可以将vue项目部署到Apache服务器上了。希望本文对新手朋友有所帮助。如有错误或补充,请指教,谢谢!访问项目地址(里面内容仅供参考):http://121.37.204.184/ak/