求idea中前端vue代码打包从0开始的详细过程

本人是学java后端的,没有安装过前端的所有东西,但是部署项目需要将打包的前端vue2的代码上传到Linux系统中的nginx服务器中进行部署,我的前端代码都在idea中,求vue2的代码打包的详细过程

img

idea打包


部署
Vue项目部署（Nginx）_nginx部署vue_Star星屹程序设计的博客-CSDN博客 vue项目部署_nginx部署vue https://blog.csdn.net/weixin_42067873/article/details/126704266

【以下回答由 GPT 生成】

首先需要确保您的Linux服务器上安装了Node.js和NPM，以及NGINX服务器。如果还没有安装，请按照以下步骤进行安装。

步骤1: 安装Node.js和NPM

  1. 在终端中运行以下命令来安装Node.js和NPM：

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs

  1. 验证Node.js和NPM已成功安装，运行以下命令来检查版本：

node --version npm --version

如果成功安装，会显示两者的版本号。

步骤2: 安装NGINX服务器

  1. 在终端中运行以下命令来安装NGINX服务器：

sudo apt-get update sudo apt-get install nginx

  1. 验证NGINX服务器已成功安装，运行以下命令来检查版本：

nginx -v

如果成功安装，会显示NGINX的版本号。

接下来，我们将开始打包您的前端Vue代码并将其部署到Linux服务器上的NGINX服务器。

步骤3: 打包前端Vue代码

  1. 在您的IDEA编辑器中，打开前端Vue项目的根目录。

  2. 在终端中运行以下命令来安装相关依赖：

npm install

  1. 安装完成后，运行以下命令来打包Vue代码：

npm run build

这将在项目目录下创建一个dist文件夹，其中包含打包后的代码。

步骤4: 部署代码到Linux服务器

  1. 将打包后的代码上传到您的Linux服务器上，可以使用工具如scp或rsync。

假设您已经将代码上传到了Linux服务器的/var/www/html目录下，该目录是用于存放NGINX服务器的静态文件的默认目录。

  1. 编辑NGINX服务器配置文件。

在终端中运行以下命令来编辑NGINX的默认配置文件：

sudo nano /etc/nginx/sites-available/default

将以下内容添加到server代码块中：

location / { root /var/www/html/dist; index index.html; try_files $uri $uri/ /index.html; }

保存文件并关闭编辑器。

  1. 重启NGINX服务器让配置生效：

sudo service nginx restart

如果没有报错，说明配置已成功应用。

现在您的前端Vue代码已经成功打包并部署到Linux服务器上的NGINX服务器中。可以通过访问服务器的IP地址来查看部署的前端应用。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^