vue项目部署到服务器?自己搭建公网ip服务器

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下面的 index.html可以看到

nginx默认的html

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

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

在你新建的文件

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

注意路径一定要写全

最后重新加载下 nginx-s reload

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

这就可以了

还有用express部署这个简单些

vue 项目开发结束后如何部署到服务器

Vue项目部署到服务器的方法有很多种,这里提供一种简单的方法:

1.首先,确保您的服务器已经安装了Node.js和npm。

2.然后,使用Vue CLI创建一个新的Vue项目。

3.打包Vue项目,生成dist文件夹。

4.将dist文件夹上传到服务器上。

5.在服务器上安装Nginx或其他Web服务器。

6.配置Web服务器,使其能够访问Vue项目的dist文件夹。

如何把vue项目部署到服务器上

在现代Web开发中,Vue.js作为一款流行的前端框架,为开发者提供了灵活且高效的工具。然而,在将Vue.js项目成功部署到Linux服务器上,可能需要一些额外的步骤和注意事项。本文将深入介绍在Linux服务器上部署Vue.js项目的详细步骤,确保你能够轻松地将你的前端应用投入生产环境。

在开始之前,请确保你的Linux服务器上已经安装了Node.js和npm。你可以通过以下命令检查它们的安装情况:

如果尚未安装,你需要按照官方文档提供的指南进行安装。

在本地开发环境中,我们使用`npm run serve`启动开发服务器,但在生产环境中,我们需要构建Vue.js项目以生成优化的静态文件。使用以下命令构建项目:

这将在项目根目录下生成一个`dist`文件夹,其中包含了你的静态文件。

使用`scp`或其他文件传输工具,将`dist`文件夹中的内容复制到你的Linux服务器上的目标目录。确保目标目录有适当的访问权限:

你需要一个 Web服务器来提供这些静态资源。你可以选择 Nginx或 Apache。以下是使用 Nginx作为 Web服务器的示例配置。

创建一个新的 Nginx配置文件来提供你的 Vue.js应用。例如,创建一个名为vue-app的配置文件:

在Nginx配置文件中添加一个新的server块:

确保替换` your_domain.com`为你的域名,`/path/to/target/directory`为你复制静态文件的目标目录。

确保创建一个符号链接到sites-enabled目录以启用此配置:

然后检查 Nginx配置是否正确:

如果一切正常,重启Nginx以应用新的配置:

通过遵循这些细致的步骤,你的Vue.js项目应该能够在Linux服务器上成功运行。这个过程确保了你的前端应用能够以高性能和可靠性为用户提供服务。希望这篇指南对你有帮助,祝你部署愉快!

阅读剩余
THE END