NGINX 部署 Vue 项目

最新推荐文章于 2024-09-07 17:42:18 发布
原创 最新推荐文章于 2024-09-07 17:42:18 发布 · 729 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #运维 #nginx

本文介绍了如何从Nginx官网下载稳定版本并安装。通过双击运行安装后，浏览器访问localhost确认服务器已成功启动。接着将打包的dist文件夹内容放入html文件夹，然后刷新浏览器页面，显示正常访问，表明静态网页部署成功。

1. windows 下载 nginx: 官网链接 https://nginx.org/

点击下载稳定版本 stable version

 

双击运行即可，在浏览器输入 localhost 回车来到以下界面：

说明服务器启动成功。

将打包的 dist 文件夹中的文件放到 html 文件夹内。

刷新浏览器 localhost 如下：

能够正常访问！ 

宝塔（bt）首次新建网站出现Welcome to nginx的解决办法
weixin_73141818的博客
11-26 1997
宝塔（bt）第一次新建网站出现Welcome to nginx的解决办法
使用Nginx部署Vue项目
weixin_42564451的博客
08-29 648
构建命令会将Vue.js应用转换成一系列静态文件（HTML, CSS, JavaScript, 图片等），并放置在项目的。部署后，确保检查Nginx的错误日志是否记录了任何访问中的问题，特别注意404错误。在使用Nginx部署Vue.js项目前，首先确保项目已经被编译和打包成静态资源。发布Vue项目，使用Nginx作为Web服务器可以极大地提升网站性能及稳定性，特别是对于静态资源的处理。对性能有进一步追求的，可以启用HTTP/2，开启GZIP压缩，优化image加载和缓存机制。安装完成后，可以通过访问。
使用 Nginx 部署 Vue 项目
asing1elife's blog
05-31 941
Vue 项目在 build 之后通常都需要部署到服务器才能够访问，本文介绍如果使用 Nginx 部署 Vue 项目 更多精彩 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线 首先需要说明可能存在的误区 我这个项目是使用的 Vue + SpringBoot 实现前后分离的项目 也就是说在部署时，前端和后端要分别单独部署，前端通过请求后端的接口还实现数据交互 一开始我是打...
Nginx部署一个vue项目
上海市市花的博客
08-09 1万+
第一步:将项目打包 demo地址:https://github.com/RenlyWen/vue-init.git 终端输入命令: cnpm install && npm run build 之后会生成一个dist文件夹 第二步:配置Nginx 修改server-location路径 worker_processes 1; # 以上是全局模块 # worker_processes的值越大,Nginx并发能力越强 events { worker_con...
nginx部署Vue项目
等风来的博客
11-05 470
nginx部署Vue项目
nginx部署VUE项目
小白变怪兽
04-19 1139
目前公司的前端代码基本都是部署在nginx下，特此来记录一下开发环境：window10。
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
在使用nginx部署Vue项目时，有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法，主要包括vue-cli@3的配置方式和vue-...
nginx部署vue项目
01-20
在本文中，我们将深入探讨如何使用Nginx部署Vue.js项目。Vue.js 是一个流行的前端JavaScript框架，而Nginx则是一个高效的Web服务器，常用于处理静态资源和反向代理。我们将按照步骤来讲解如何打包Vue项目并将其部署...
在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.csdn.net/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
nginx 部署vue 项目
qq_33285313的博客
07-15 311
在vue 项目中修改上边三个文件 在nginx 中做以上配置 location /dmc { #rewrite .* /dmc/index.html break; root /usr/local/nginx/html; #编译vue 出来的文件放置的地方 index index.html index.htm; try_files $uri $uri/ @dmc_route...
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项目
此爱如少年
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项目
热门推荐
Asurplus
03-08 20万+
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，是部署前端项目的首选，在 Nginx 中部署 vue 项目的步骤如下： 1、原始配置文件如下 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on;
nginx 部署vue项目
weixin_39255905的博客
06-12 1144
nginx 部署vue 项目
Nginx 部署 Vue 项目
最新发布
weixin_58606202的博客
09-07 1288
通常，默认配置文件位于 `/etc/nginx/sites-available/default`（Ubuntu/Debian）或 `/etc/nginx/nginx.conf`（CentOS）。完成上述步骤后，打开浏览器并访问 `http://your_domain_or_IP`，即可看到你部署的 Vue 项目。若你使用了本地服务器进行测试，请使用服务器的 IP 地址来访问。- `root`：将 `/path_to_your_vue_project/dist` 替换为项目的 `dist` 目录的绝对路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值