vue如何将项目部署到服务器上并且使外网能够访问到

你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ，通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 indexhtml 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

简述：Spring boot+Vue 前后端分离项目部署，主要采用docker容器部署方式。

Springboot项目部署：docker构建mysql环境+docker构建项目自身环境。

Vue项目：使用docker启动nginx服务器方式代理部署。

项目使用mysql80作为数据源，所以部署时需要使用docker构建mysql环境及项目自身环境。

连接出现1251错误时：

首先将项目进行打包：mumu-001-SNAPSHOTjar

到此，springboot项目采用docker方式运行部署结束。

使用docker容器方式运行nginx服务器。

对于nginx服务器，重要的两个 *** 作是：

所以我们在配置启动nginx容器的时候，需要将对应的目录及文件进行宿主机挂载，方便后续更新资源及 *** 作

启动命令：

前言：
有这样一个需求，需要在多个不同的服务器下部署同一个前端项目，（正常 *** 作是每一台服务器都根据不同的IP地址build一个包依次部署，非常繁琐，因此简化为多个环境只需要用打一个包即可）

解决方案：首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行sh文件来获取环境变量set到项目中

以下是vue项目为例， React ，Angular 均可以使用

1，在项目根目录创建 runsh 文件

注解：
第一行 apiUrl为当前系统配置的系统环境变量名称
第二行 将获取到的ip地址赋值到打包后的dist文件下indexhtml下的body中

2，项目中使用

3，将打包后的dist文件上传到服务器后，运行 runsh，运行完成，页面就可以正常请求啦~

运行命令如下，也可手动运行

重要：需要在部署的服务器提前配置系统环境变量API_URL，否则获取不到

你现在的这个情况是通过vue打包后，build之后的产物。

先不多说，直接说方法，最后再解释。

想运行在tomcat上，先在打包之前做一下配置：

首先在config文件夹下找到indexjs修改一下当前路径

把assetsPublicPath：‘/’改成assetsPublicPath：‘/‘

对就是/前面加个点儿。

然后重新打包。就可以直接打开了。

======================================

为什么这样做呢，因为vue的打包默认形成的是一个部署在服务器环境上的文件，如果是部署在静态站点上（express或者阿帕奇），就需要做路径转变。其实算是个小tip。

欢迎追问。

在dist目录下的static静态资源，通过路由访问时，会多出一个路由在静态资源前面，如：
ip:8080/Test/static/onejs
Test路由的存在导致 onejs报404问题；

项目在构建dist时，路由配置的问题，找到Vue项目下
/src/router/indexjs文件，
更改为如图方式：

重新 npm run build，将dist替换到服务器上，重新构建docker镜像及启动容器即可

简单实用的前端部署, 一条命令搞定, 省去繁琐的步骤!

主要是 nodejs shelljs(命令行命令) node-ssh(连接服务器)

项目git 地址

(这个git项目是我自己搭的一个比较low的vue脚手架,集成ts)

(第一次写文章, 文笔不行, 多多包涵,有不对的地方尽管指出)

(主要看 自动部署 在 upload 目录 )

npm 或 cnpm i chalk ora shelljs node-ssh inquirer compressing -D

大功告成~~

咳咳, 放心, 不会有公众号啥广告, 也不会求打赏, 如果您觉得对您有一点点帮助 点个赞或者去GitHub点个star 那就非常感谢了
项目git 地址

---