关键词：
本文记录如何将做好的Vue项目部署到服务器上，需要准备：
- linux系统的服务器或者虚拟机
- Vue项目打包
- Nginx服务器的配置和部署
1、linux系统准备
本次使用云主机作为部署主机。
2、Vue项目打包
切换到项目所在目录，使用 npm run build 命令完成项目打包，会生成一个dist文件夹
编译后生成的dist文件夹：
3、Nginx服务器部署
（1） 安装编译器及依赖的库
yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel
（2）下载Nginx并解压
cd /usr/local && wget http://nginx.org/download/nginx-1.21.6.tar.gz && tar zxvf nginx-1.21.6.tar.gz
（3）安装Nginx
make && make install #执行目录中的makefile文件（4）验证安装版本
（5）指定配置文件启动及停止操作
指定配置文件启动：
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf停止Nginx服务：
/usr/local/nginx/sbin/nginx -s stop（6）创建网站根目录并放入vue项目
这里在创建好网站根目录后，把第2步中打包的vue项目放到该目录下
（7）配置Nginx服务
Nginx配置文件：/usr/local/nginx/conf/nginx.conf
在配置文件中，需要修改：
- location下的root到自己的网站根目录，在这里我设定的是 /www/html/dist
- server_name：该属性用于定义服务器的访问ip，默认是localhost就代表仅可本地访问，如果服务器有自己对应的外网ip，修改为自己的外网ip即可。（这里我对应的是云主机的ip）
完成以上配置后，重启Nginx服务，并完善防火墙相关配置。
4、访问对应页面
如何在nginx下部署vue项目(代码片段)
首先我们使用npmrunbuild来生成项目的静态页面，会在项目的根路径的dist目录下我们将dist下的index.html和static静态文件发布到服务器的某一目录下比如说我们发布的是在usr/local/vue/page下，那么我们对于nginx的配置如下在/usr/lo... 查看详情
nginx部署vue项目以及解决刷新页面404问题(代码片段)
在宝塔面板站点中增加相应配置： location/try_files$uri$uri/@router;indexindex.html;location@routerrewrite^.*$/index.htmllast; 查看详情
vue项目部署（nginx）(代码片段)
本文记录如何将做好的Vue项目部署到服务器上，需要准备：linux系统的服务器或者虚拟机Vue项目打包Nginx服务器的配置和部署1、linux系统准备本次使用云主机作为部署主机。 2、Vue项目打包切换到项目所在目录，使用np... 查看详情
docker+nginx部署springboot+vue前后端分离项目(代码片段)
目录一、windows环境1.1、windows环境前端部署1.2、windows环境后端部署二、linux环境2.1、安装docker2.2、安装dockercompose2.3、编写Dockerfile文件2.4、编写docker-compose.yml文件2.5、修改application-pro.yml2.6、准备好nginx的挂载目录和配置2.7、上传... 查看详情
将一个vue项目部署的腾讯云ubuntu服务器nginx上(代码片段)
将一个Vue项目部署的腾讯云ubuntu服务器nginx上1.要操作linux服务器需要两个工具xshell、xftp，可以免费申请使用下载地址xftp下载地址xshell2.需要安装nginxsudoapt-getinstallnginx3.判断nginx是否安装成功nginx-v4.修改配置文件vim/etc/nginx/nginx.conf... 查看详情
将一个vue项目部署的腾讯云ubuntu服务器nginx上(代码片段)
将一个Vue项目部署的腾讯云ubuntu服务器nginx上1.要操作linux服务器需要两个工具xshell、xftp，可以免费申请使用下载地址xftp下载地址xshell2.需要安装nginxsudoapt-getinstallnginx3.判断nginx是否安装成功nginx-v4.修改配置文件vim/etc/nginx/nginx.conf... 查看详情
nginx配置同一域名同一端口下部署多个vue项目(代码片段)
前言：本地开发好了多个前端微信网页项目，想部署上线，但是微信那边必须得在默认端口下访问前端项目，于是就nginx配置同一域名同一端口下部署多个vue项目。问题：默认端口就只有一个，多个项目实... 查看详情
nginx配置同一域名同一端口下部署多个vue项目(代码片段)
前言：本地开发好了多个前端微信网页项目，想部署上线，但是微信那边必须得在默认端口下访问前端项目，于是就nginx配置同一域名同一端口下部署多个vue项目。问题：默认端口就只有一个，多个项目实... 查看详情
docker项目部署(代码片段)
docker项目部署1.vue项目docker部署linux如何查看当前目录的完整路径安装nginx镜像vue项目打包docker部署方式一：挂载（适用于要经常修改的情况）docker部署方式二：COPY（适用于修改少的情况）1.vue项目docker部署... 查看详情
解决本地nginx部署vue项目只能访问默认页面问题(代码片段)
...#xff1a;用vue打包生成dist文件夹，然后在本地nginx部署vue项目时只能访问默认页面，刷新和跳转页面都会出问题。原因：只访问了dist文件下的index.html、index.htm页面，而其他页面在访问的时候被nginx当作自身的服务访... 查看详情
解决本地nginx部署vue项目只能访问默认页面问题(代码片段)
...#xff1a;用vue打包生成dist文件夹，然后在本地nginx部署vue项目时只能访问默认页面，刷新和跳转页面都会出问题。原因：只访问了dist文件下的index.html、index.htm页面，而其他页面在访问的时候被nginx当作自身的服务访... 查看详情
解决本地nginx部署vue项目只能访问默认页面问题(代码片段)
...#xff1a;用vue打包生成dist文件夹，然后在本地nginx部署vue项目时只能访问默认页面，刷新和跳转页面都会出问题。原因：只访问了dist文件下的index.html、index.htm页面，而其他页面在访问的时候被nginx当作自身的服务访... 查看详情
最细致的springboot结合vue前后端分离项目打包部署步骤（搭配nginx）(代码片段)
文章目录前言一、环境准备二、SpringBoot项目打jar包1.1使用Maven的package插件打包1.2上传至Linux服务器三、Vue项目打包1.1修改后台请求地址1.2生成dist文件1.3上传至linux服务器三、配置Nginx四、启动项目1.1启动Nginx服务器1.2启动SpringBoot1... 查看详情
windows环境nginx部署springboot+vue前后端分离项目(代码片段)
...nx，MySQL，JDK，Redis。然后打包springboot，vue项目注意：要先将springboot的配置文件application.yml下的redis，数据源的地址端口密码改成服务器环境下的，然后将springboot 查看详情
docker-compose+nginx部署springboot+vue前后端分离项目(代码片段)
目录一、windows环境1.1、windows环境前端部署1.2、windows环境后端部署二、linux环境2.1、安装docker2.2、安装dockercompose2.3、编写Dockerfile文件2.4、编写docker-compose.yml文件2.5、修改application-pro.yml2.6、准备好nginx的挂载目录和配置2.7、上传... 查看详情
手把手带你玩转k8s-一键部署vue项目(代码片段)
...统部署方式与k8s部署区别在没有使用k8s之前的前后端分离项目部署，一般是依托于宿主机上的nginx。前端静态资源走nginx,后端接口会使用nginx做代理。而此时，nginx是提前安装的，所以一键脚本并不会考虑nginx的安装与运行，只会... 查看详情
将vue部署在nginx上(代码片段)
在前面已经讲了如何利用docker安装nginx，现在就将项目部署到上面:首先通过npmrunbuild打包成dist目录可以先看一下devServer是如何写的:devServer:disableHostCheck:true,port:8081,proxy:'/showBooks':target:'http://192.168.231.155:8082 查看详情
vue项目发布采用gzip压缩文件部署到nginx无法运行问题(代码片段)
...。应该二者结合，综合使用。一、问题描述有一个VUE项目，开发环境下，使用npm运行，一切正常，发布部署到nginx上一片空白。用谷歌浏览器进入开发者工具，提示什么“UncaughtSyntaxError:Unexpectedtoken‘<’... 查看详情