linux vue项目+npm run build + nginx

最新推荐文章于 2024-05-08 15:49:23 发布

转载最新推荐文章于 2024-05-08 15:49:23 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shuangzikun/p/linux_vue_build.html

文章标签：

#运维 #javascript #网络 #ViewUI

本文介绍如何将Vue项目打包并配置Nginx进行部署。主要包括：使用npm run build命令打包Vue项目；配置Nginx服务器以指定端口提供静态资源；确保服务器防火墙允许外部访问。

系统

环境

vue nginx

步骤

1、打包vue项目

2、配置nginx

打包vue项目

1、项目配置我们使用服务器的8000端口

2、打包

# npm run build

打包成功会创建dist目录

3、上传到服务器

配置nginx

1、进入nginx

2、复制默认的配置文件default.conf -> fengtaoconf

# cp default.conf fengtao.conf

# vim fengtao.conf 修改端口和路径

3、有的服务器还需控制台开启端口

4、防火墙开启端口

# firewall -cmd --zone=public --add-port=8000/tcp -permanent //开启端口

# systemctl restart firewalld.service // 重启firewall

访问

转载于:https://www.cnblogs.com/shuangzikun/p/linux_vue_build.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

anliu4881

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

npm run build部署到云服务器中的Nginx（图文配置）

码农研究僧的博客

08-26

878

Vue3.0执行npm run build后执行index.html出现白页的解决办法

weixin_48031922的博客

03-31

510

Vue3.0执行npm run build后执行index.html出现白页,解决办法在工程目录下新建文件vue.config.js, 输入以下内容, 配置相对路径。 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/static/' : './' } 上面这个之所以配成/static/，是因为我后台用了nginx做服务器，静态资源如css,js,img都放在(根目录)/static

参与评论您还未登录，请先登录后发表或查看评论

linux npm run build,linux vue项目+npm run build + nginx

weixin_32210881的博客

05-26

373

系统环境vue nginx步骤1、打包vue项目2、配置nginx打包vue项目1、项目配置我们使用服务器的8000端口2、打包# npm run build打包成功会创建dist目录3、上传到服务器配置nginx1、进入nginx2、复制默认的配置文件default.conf -> fengtaoconf# cpdefault.conf fengtao.conf# vim ...

Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题

p15097962069的博客

02-24

415

Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题

linux npm run build,npm run build 报错

weixin_42398635的博客

05-26

1532

debug0 info it worked if it ends with ok1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',1 verbose cli 'C:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js',1 verbose cli...

npm run build打包产生的build文件夹通过nginx部署到服务器上访问（centos8）

today__present的博客

02-11

5062

设置nginx.conf： location / { try_files $uri $uri/ =404; }

nginx运行npm run build后生成的dist文件

学敲代码的Stars的博客

10-07

3212

nginx运行npm run build后生成的dist文件安装前置资源 $ yum -y install gcc pcre-devel zlib-devel openssl openssl-devel 安装nginx $ cd /usr/local $ wget -c https://nginx.org/download/nginx-1.9.9.tar.gz $ tar -zxvf nginx-1.9.9.tar.gz 配置nginx $ cd nginx-1.9.9 $ ./configure -

Vue项目部署Nginx配置文件 SSL

08-11

当你的 Vue 项目完成开发并经过 `npm run build` 编译后，生成的静态资源需要部署到服务器上供用户访问。Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets ...

Linux——在Linux系统上打包和部署springboot+vue项目，nginx+mysql+redis+minio

weixin_56039103的博客

08-05

3137

使用java -jar springboot-affair-0.0.1-SNAPSHOT.jar命令运行Java项目。在浏览器中输入网址http://192.168.78.128:80，按回车，自动重定向到登录页，环境搭建成功！打包的目录下，打包后会出现一个target目录，进入目录可以看到打好的jar包。进入拉取下来的前端代码所在的src目录下，输入npm run build命令。最后，以上项目都完成后，可以通过虚拟机IP+Nginx配置的端口号访问系统。最后可以查看npm版本即为安装成功。.......

node.js+npm+vue+webpack+nginx前端项目打包部署到服务器

小成一撇的博客

08-20

5081

本文主要介绍vue+webpack打包部署到nginx服务器。因为可以需要依赖node.js,所有需要先安装node.js,步骤如下 1.首先先去下载node.js,点击查看下载安装步骤http://www.cnblogs.com/wuac/p/6381819.html，本主要介绍在window下的操作，所以别忘了将node.js和npm加入到环境变量下。npm是我们要用到的包管理工具，一会vu...

nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx

2401_84435838的博客

05-08

4686

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。

nginx 启动命令_npm run build 打包后，如何运行在本地查看效果（Nginx服务）

weixin_39915820的博客

11-28

1074

一、下载nginx：1、地址：http://nginx.org/2、下载正式版本：3、下载完成后解压到自定义的目录二、nginx启动1、使用命令行工具cmd进入nginx的安装目录2、nginx启动（注意不要直接双击nginx.exe，这样会导致很多问题）运行命令 start nginx 启动nginx服务，启动时会一闪而过是正常的3、打开任务管理器查看是否有nginx.exe的进程如果没有ngi...

【Linux安装npm命令】

m0_37680131的博客

03-31

3457

Linux安装npm命令 yum install -y nodejs npm install -g cnpm --registry=https://registry.npm.taobao.org npm install npm run build npm -v

Linux安装NPM

tongxin_tongmeng的博客

12-28

1290

docker安装、docker-compose安装、docker-compose.yml、安装命令、访问路径、官网地址

10.前端打包与nginx部署

大李出奇迹的博客

09-18

1001

首先，确保你的项目是可以运行的，以若依为例，运行npm run dev 是可以正常运行起来前端的。然后前端的打包命令是。打包好之后，在项目代码路径下会出现一个dist文件夹，这里面的代码粘贴到nginx的html目录下即可。然后将打包好的dist目录丢在nginx的html下面。然后重启docker的nginx虚拟容器。

Docker: 部署 Nginx 反向代理

超悠閒的博客

02-28

4648

Docker: 部署 Nginx 反向代理文章目录Docker: 部署 Nginx 反向代理环境准备实验一：容器内部署 Nginx 静态资源服务器目录结构静态资源准备Docker Compose 配置nginx 配置启动 & 效果实验二：Nginx 反向代理本机服务准备 Express 服务修改 Docker Compose 配置修改 nginx 配置测试实验小结参考连接完整代码示例环境准备要求安装下列服务 Docker Docker Compose(Windows/MacOS 下 Dock

Vue项目部署到服务器（使用nginx）

Curry_2019的博客

04-14

2302

使用nginx部署vue项目到服务器，需要服务器先配置好nginx。

【干货】基于 Nginx 实现一个灰度上线系统

小生方勤

08-07

803

软件开发一般不会上来就是最终版本，而是会一个版本一个版本的迭代。新版本上线前都会经过测试，但就算这样，也不能保证上线了不出问题。所以，在公司里上线新版本代码一般都是通过灰度系统。灰度系统可以把流量划分成多份，一份走新版本代码，一份走老版本代码。而且灰度系统支持设置流量的比例，比如可以把走新版本代码的流量设置为 5%，没啥问题再放到 10%，50%，最后放到 100% 全量。这样可以把出现问题的影响...

npm run build生产环境打包部署

最新发布

05-30

<think>好的，我需要帮助用户解决在Linux系统上使用Nginx部署Vue前端项目的问题。首先，我得回忆一下Vue项目的部署流程。通常，Vue项目需要先打包生成静态文件，然后配置Nginx来服务这些文件。用户可能已经知道一些基础，但需要详细步骤。我应该分步骤说明，确保每个环节都清晰。第一步是安装Node.js和npm，因为Vue依赖这些环境。需要确认用户是否已经安装，如果没有，给出安装命令，比如使用apt-get安装。接下来是打包Vue项目，使用npmrun build命令。这里可能需要提醒用户检查vue.config.js中的publicPath是否正确，尤其是如果项目部署在子路径下的话。这个点容易出错，需要特别强调。然后是安装和配置Nginx。用户可能不熟悉Nginx的安装，所以给出具体的安装步骤，比如用apt安装。配置部分需要详细说明如何编辑Nginx的站点配置文件，指定root目录为打包后的dist文件夹，并设置try_files来处理路由模式的问题，比如使用history模式时的配置。还要提到SSL证书的配置，因为现在很多项目需要HTTPS。这部分可以简要说明，如果需要更详细的信息，可以建议用户参考其他资料或生成相关问题。最后是重启Nginx服务，并检查防火墙设置，确保端口开放。这些步骤完成后，用户应该能通过域名或IP访问项目了。在生成相关问题的时候，要考虑用户可能的后续问题，比如如何配置HTTPS、如何处理路由404错误、如何优化Nginx性能等。这些问题都是部署过程中常见的，能帮助用户进一步解决问题。需要确保所有的命令和配置正确无误，比如使用sudosystemctl restartnginx来重启服务。同时，路径部分要提醒用户根据实际项目结构修改，避免直接复制粘贴导致错误。检查是否有遗漏的步骤，比如权限问题，可能需要chmod或chown命令调整目录权限。不过通常打包后的dist目录权限应该没问题，但如果有问题，用户可能需要处理。另外，确保使用中文回答，符合用户要求。所有的代码块和命令用反引号包裹，保持格式正确。数学公式部分在这个问题中可能用不到，但如果有性能分析或算法相关内容，需要遵循之前的格式要求，但这里暂时不需要。总结一下，整个思考过程需要覆盖从环境准备到部署完成的每个步骤，确保用户能按部就班地操作，并预见到可能出现的问题，在回答中给出提示或相关问题供用户进一步探索。</think>### 如何在Linux上用Nginx部署Vue.js项目 #### 一、环境准备 1. 安装Node.js环境（用于构建Vue项目） ```bash sudo apt-get update sudo apt-get install -y nodejs npm node -v # 验证版本需≥14.18.0 ``` 2. 更新npm并安装Vue CLI ```bash sudo npm install -g npm@latest sudo npm install -g @vue/cli ``` #### 二、项目打包 1. 进入Vue项目根目录执行构建 ```bash npm install npm run build ``` 生成的静态文件位于$./dist$目录[^2] 2. 检查vue.config.js配置： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/' // 根据实际部署路径调整（如子目录需改为'/subpath/'） : '/' } ``` #### 三、Nginx配置 1. 安装Nginx： ```bash sudo apt-get install -y nginx ``` 2. 创建配置文件（示例：/etc/nginx/sites-available/vue-app） ```nginx server { listen 80; server_name your-domain.com; # 静态文件路径 root /var/www/vue-app/dist; index index.html; # 处理前端路由 location / { try_files $uri $uri/ /index.html; } # 可选：开启gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; } ``` 3. 创建符号链接并测试配置 ```bash sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/ sudo nginx -t # 测试配置语法 ``` #### 四、部署与验证 1. 将dist目录复制到部署路径 ```bash sudo mkdir -p /var/www/vue-app sudo cp -r dist/* /var/www/vue-app/ ``` 2. 重启Nginx服务 ```bash sudo systemctl restart nginx ``` 3. 检查防火墙设置（若启用） ```bash sudo ufw allow 80/tcp ``` #### 五、HTTPS配置（可选）通过Let's Encrypt获取SSL证书： ```bash sudo apt-get install certbot python3-certbot-nginx sudo certbot --nginx ```