nginx部署多个vue多页面项目

众所周知，vue主要是用于开发单页应用的，在网上，也可以通过修改配置文件，实现多页面应用的开发，通过配置方式的开发多页面会有较多的缺点，在网上有许多论述，在此不再多言。此篇文章主要讲的是vue多页面的项目在nginx上部署，实现前后端分离，后台通过webapi和ajax的方式获取数据的方式。
1、首先需要做的是在服务器上安装nginx服务器，个人使用的是Ubuntu20.4版本，这个网上的教程较多，不做过多介绍。
2、修改nginx的配置文件，在安装完成之后，输入nginx -v查看nginx服务的版本，如下图：

然后cd到/etc/nginx/sites-enabled路径下面，可以看到一个default文件，该文件就是需要我们修改的文件，建议先备份之后再修改。输入nano default,正常情况下可以看到如下截图内容：

而需要修改的配置如下截图的内容：

其中root /home/chuan/Web;和 index index.html index.htm index.nginx-debian.html;
表示的是访问该服务器ip之后的目录，如访问127.0.0.1，此时服务器会到root对应的目录下去返回index标识的文件，例如我们需要在访问服务器的ip时能够在浏览器中展示首页的内容，此时我们就可以将vue做好的首页应用放到root所对应的路径下面。如下图：

其中的index.html和static就是首页应用在通过vue编译打包之后的文件。此时如果我们还需要添加更多的界面该怎么做？如上面第三张图，在图中可以看到如下字样：

location /login{alias /home/chuan/Web/Login;}location /main{alias /home/chuan/Web/Main;}

其实该内容就是配置其他页面的访问路径，比如第一个location就是如果该项目vue编译好的登录页面的存放位置，此处注意alias关键字的使用。第二个location就是项目的主页的vue放置的路径。如下截图：

在配置好之后，ctl+s保存文件，再ctl+x退出。
此处提醒一下需要注意的是，在vue项目编译的时候，需要修改一下配置文件config/index.js文件中的assetPublicPath的值，修改之前是“/”,需要修改成“./”也就是将根目录修改成当前目录，如下截图：
将编译好之后的dist文件中的static文件夹以及index.html通过某些方式上传到刚才nginx设置的路径下面，然后重启注意文件夹的权限。在将相关的文件放到对应的路径下面之后，输入命令：sudo nginx -s reload，并输入systemctl restart nginx重启nginx服务。然后通过浏览器访问服务器的ip地址，即可访问到设置为root路径
的vue项目：如下截图：

至于前端与后台的交互内容，后续再跟进写出来吧。。。。。。

nginx部署多个vue多页面项目相关推荐

用uwsgi和nginx 部署 django和vue打造的前后端分离项目
用uwsgi和nginx 部署 django和vue打造的前后端分离项目前言由于现在没有彻底掌握nginx的使用,部署起来有点磕磕绊绊,为了防止以后再次需要部署的时候无法快速找到适合的资料,以此文 ...
同一域名端口下，通过nginx部署多个vue项目
情景介绍服务器上80端口已部署一套vue项目,现在乃至未来还可能要部署n个前端项目,而已部署的项目的nginx的配置不能修改项目配置假设需要部署的第二个vue项目是放在服务器的 "p ...
nginx配置vue项目500_一个Nginx部署多个vue前端项目总结
摘要: 近来接手了一个二次开发的前后端分离模式的项目,其中在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在一个Nginx下部署2 ...
前端七十二变之vue单页面项目实战
1.组件嵌套将单文件组件组合在一起有两种方式,一种是嵌套方式,一种用路由的方式.嵌套的方式代码如下: 下图示中,假设组件A中要嵌入组件B <template>// 在A组件中使用B组件& ...
app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏项目第一次上线正常项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
Docker+Nginx部署Angular国际化i18n
Docker+Nginx部署Angular国际化i18n 在Angular项目中添加default.conf文件 default.conf 为了支持局域网,增加一个域名,即本地的局域网ip地址. se ...
nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面
nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面 location / {expires 1h;root /home/test/vue/dist/;index index.h ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
Ubuntu配置Nginx部署Vue SPA项目
Ubuntu配置Nginx部署Vue SPA项目文章记录了部署Vue SPA项目后可从ip访问的过程,因域名访问需要备案暂未尝试,后续若实行亦会更新在此处. 系统为Ubuntu18.04. Ngin ...

nginx部署多个vue多页面项目

nginx部署多个vue多页面项目相关推荐

最新文章

热门文章