nginx部署vue项目

最新推荐文章于 2025-05-20 11:45:33 发布
原创 最新推荐文章于 2025-05-20 11:45:33 发布 · 191 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx #vue

博客介绍了将Vue项目部署到Nginx的具体步骤。先把Vue的dist目录文件放到Nginx的html/myapp目录，接着修改Nginx配置文件里的默认目录和前端启动文件名，然后关闭并重新启动Nginx，最后可成功访问项目。

1、将vue的dist目录下的所有文件放到nginx/html/myapp目录下

2、进入nginx配置目录，打开nginx.conf配置文件，修改图中默认目录和默认前端启动文件名

3、关闭nginx====>  nginx -s stop

4、启动nginx，进入sbin目录，./nginx

5、再次打开地址xxxxxxx/index.html，已成功访问

使用Nginx部署Vue项目
weixin_42564451的博客
08-29 649
构建命令会将Vue.js应用转换成一系列静态文件（HTML, CSS, JavaScript, 图片等），并放置在项目的。部署后，确保检查Nginx的错误日志是否记录了任何访问中的问题，特别注意404错误。在使用Nginx部署Vue.js项目前，首先确保项目已经被编译和打包成静态资源。发布Vue项目，使用Nginx作为Web服务器可以极大地提升网站性能及稳定性，特别是对于静态资源的处理。对性能有进一步追求的，可以启用HTTP/2，开启GZIP压缩，优化image加载和缓存机制。安装完成后，可以通过访问。
在Docker中使用Nginx部署Vue项目
什么都干的派森
04-18 6310
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试 一、前置需求 1.liunx环境 本人用的 Centos7 2.安装Docker 参考这篇文章 https://blog.youkuaiyun.com/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
Nginx部署Vue项目
Fanger_travel的博客
03-01 3841
root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）如下图，<listen>项为nginx监听的端口，默认是80。（5）打开浏览器，输入网址：http://localhost:9528（假设配置文件中端口修改成9528）完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。包解压后会得到如下目录。
Nginx部署vue项目
热门推荐
qq_40501683的博客
01-27 1万+
步骤一：项目打包 打开vscode终端 在终端输入 npm run build 这时可以看到生成dist文件夹，我们要放在服务器上的文件就在这， 步骤二：配置nginx 找到在官网下载的安装包。
nginx部署VUE项目
小白变怪兽
04-19 1139
目前公司的前端代码基本都是部署在nginx下，特此来记录一下开发环境：window10。
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
在使用nginx部署Vue项目时，有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法，主要包括vue-cli@3的配置方式和vue-...
nginx中部署vue项目
此爱如少年
08-04 1万+
文章目录前言启动nginx服务部署Vue项目1 部署到根目录1）vue配置2）nginx配置及部署3）路由模式及地址匹配history模式hash模式2 部署到子目录1) vue配置2）nginx配置 前言 nginx是一个高性能的HTTP和反向代理web服务器。作为Web服务器，nginx处理静态文件、索引文件以及自动索引效率非常高。 启动nginx服务 nginx 浏览器中输入： localhost:80 说明服务起来了。 部署Vue项目 下面的示例，前端Vue项目使用Vue CLI3创建 1 部署
【Nginx】部署vue项目
不知道在干嘛每天
12-10 726
Nginx安装 点击下面参考链接——>centOS7安装nginx及nginx配置 安装完成之后，进入nginx目录，路径如下 /usr/local/nginx 主要使用到的有三个目录： conf：nginx配置文件的目录 html：项目打包文件存放的目录 sbin：Nginx启停的目录 conf conf目录里面主要用到两个文件 cert：给域名配置ssl证书时，存放key的目录，ssl证书的配置，在阿里云、华为云等等都有说明。 nginx.conf：nginx服务配置的文件 html 这里
nginx 部署vue项目
changyana的博客
03-18 1万+
nginx部署vue项目，详细适合新手
Nginx 部署 Vue 项目
最新发布
qq_35752389的博客
05-20 1163
Nginx 部署 Vue 项目
使用 Nginx 部署 Vue 项目
asing1elife's blog
05-31 941
Vue 项目在 build 之后通常都需要部署到服务器才能够访问，本文介绍如果使用 Nginx 部署 Vue 项目 更多精彩 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线 首先需要说明可能存在的误区 我这个项目是使用的 Vue + SpringBoot 实现前后分离的项目 也就是说在部署时，前端和后端要分别单独部署，前端通过请求后端的接口还实现数据交互 一开始我是打...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值