nginx启动vue_nginx运行vue项目

最新推荐文章于 2024-03-01 15:58:15 发布
最新推荐文章于 2024-03-01 15:58:15 发布
阅读量902 收藏 2
点赞数
文章标签： nginx启动vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28871645/article/details/113007657
版权

6cbc47324cd8514bd70be63d584d2937.png

下载下来会是一个解压包，解压到你想放的文件夹下

49c7d4e1cf55ca6d3bb9910cb975b0eb.png

运行nginx.exe，然后打开浏览器输入localhost出来如下图片所示就说明成功了：

d42e26fce3bf27f2b6b087c4eca16df6.png

新增转发地址(后台请求地址)

993a86380a484d23009703a7196ffa16.png

/api

64a0be4de61b64905ec348b3d5ae985c.png

上面是安装配置nginx服务器的方法，下面就是如何把自己的vue项目部署到你所安装配置的nginx服务器上的步骤了：

首先找到自己的vue的项目然后输入命令 npm run build 他会在你的vue目录下生成一个dist文件夹里面就是你的vue的项目

然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹

把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留，然后把你刚刚复制的文件粘贴进去

4ee5600242fbb4ef6fafcfaf747c2286.png

pub文件夹是我这里设置的，根据自己项目而定

把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留，然后把你刚刚复制的文件粘贴进去

运行起来登录时发现请求头拿取不到，到conf文件夹的ngin.conf设置如下图：

6c6534d12f85c067ace731a254992a6d.png

渔翁丶稀饭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
Ngnix运行vue项目
qq_44399112的博客
06-11 224
前后端分离项目，前端项目用ngnix启动vue页面项目 1. 下载安装包 下载地址，解压后是一个文件夹 2. 部署vue 找到自己的vue的项目然后输入命令 npm run build 会在vue目录下生成一个dist文件夹里面就是你的vue的项目 然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹 把他们复制下来然后打...
Nginx部署Vue项目
Fanger_travel的博客
03-01 1942
root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）如下图，<listen>项为nginx监听的端口，默认是80。（5）打开浏览器，输入网址：http://localhost:9528（假设配置文件中端口修改成9528）完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。包解压后会得到如下目录。
ngnix配置启动vue项目
水月灯花的博客
09-06 1644
http://nginx.org/en/download.html，下载稳定版 Stable version，nginx-1.22.0 windows版，解压到没有中文路径文件后双击nginx.exe就可以运行了，可以再进程中查看nginx的进程，否则更改nginx-1.22.0\conf\nginx.conf配置文件的端口号为其他，因为可能端口号被占用。将其复制后，放入到nginx-1.22.0\html文件下进行替换，然后在浏览器中输入nginx服务器的地址。，如果看到index页面就说明部署成功了。
nginx启动vue项目
weixin_41463944的博客
05-29 1511
1、官网下载nginx:http://nginx.org/en/download.html 2、下载之后是个文件夹：启动.exe 3、在浏览器输入localhost,若不成功，则修改nginx的目录下找到conf，找到一个nginx.conf的文件 4、然后修改端口号 5、再次输入localhost:端口号，出现如下界面则成功 6、在vue项目下，输入命令npm run build ，会出现dist文件夹 7、复制dist文件夹下的index.html和static文件夹 8、粘贴这两个文件到
nginx部署vue项目
m0_71349739的博客
01-17 1685
（1）到nginx根目录，双击nginx.exe，启动nginx，想要关闭，打开任务管理器找到nginx结束任务。打开vscode在vue根目录打开命令行输入npm run build，这时就能看到dist文件夹，我们要将dist文件夹放到服务器上。（2）到nginx根目录打开命令行，输入start nginx启动成功，关闭nginx -s stop。
Vue项目部署Nginx配置文件 SSL
08-11
Vue项目结果build编译后，放在Nginx的html文件夹内，替换该配置文件，就可以在Nginx服务器上运行Vue项目
web服务器nginx+部署前端vue项目
最新发布
03-22
1. 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。 其特点是占有内存少，并发能力强...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue项目在nginx部署启动
qq_55946937的博客
07-06 1339
打包命令执行完成后会出现一个文件夹，默认为dist,在vue.config.js文件中可以通过outputDir设置文件名。将打包的文件夹移动到nginx目录。在package.json有一段代码是命令执行的，代码所示打包命令为build:prod,所以打包命令为npm install build:prod.
Nginx本地启动前端Vue项目
TVM的博客
06-08 1315
nginx -c filename #设置配置文件(默认是:/etc/nginx/nginx.conf)nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx。nginx -p prefix #设置前缀路径(默认是:/usr/share/nginx/)nginx -s quit #优雅地停止Nginx服务（即处理完所有请求后再停止服务）nginx -s stop #强制停止Nginx服务。nginx -s reopen #重启Nginx。,-h #打开帮助信息。
Nginx运行Vue项目：基本运行
宋冠巡的博客
08-16 881
在Nginx服务器中，运行Vue项目。
nginx发布vue项目
刘延林
06-28 1万+
如图：途中划线部分是打包的vue项目路径nginx.conf配置入下：server {        listen       81;        server_name  localhost;         #charset koi8-r;        #access_log  logs/host.access.log  main;        #location / { # #默认...
nginx启动vue_nginx下部署vue项目的方法步骤
weixin_33014989的博客
01-17 1959
今天要用到服务器nginx，还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来。首先要去nginx官网下下载nginx：下载下来会是一个解压包，解压到你想放的文件夹下运行nginx.exe，然后打开浏览器输入localhost出来如下图片所示就说明成功了：然后如果没有成功出来的话也不要慌不要怕，可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf点击进去然后找到...
NGINX下部署VUE项目是如何执行的
m0_47905795的博客
02-28 1195
npm run build，生产环境打包，其中.env和.env.production文件会加载。，npm run serve，启动项目，并且加载.env和.env.development文件。，npm run serve-test，启动项目，并且加载.env和.env.test文件。，npm run test，测试环境打包，其中.env和.env.test文件会加载。，npm run all，生产环境和测试环境同时打包，加载不同的.env文件。贴一下package.json文件的命令配置说明。
如何在nginx下部署vue项目
热门推荐
未思
04-21 2万+
首先我们使用 npm run build 来生成项目的静态页面，会在项目的根路径的dist目录下 我们将dist下的 index.html和static静态文件发布到服务器的某一目录下 比如说我们发布的是 在 usr/local/vue/page下，那么我们对于nginx的配置如下 在/usr/local/nginx/conf下打开nginx.conf 修改service的内容如下 ...
nginx部署
Que_Li的博客
11-01 443
1. 项目打包npm run build 2. 将build 出来的文件放到服务器一路径下scp -r build [email protected]:/home/site3. 配置nginxmkdir /etc/nginx/sitehostcd /etc/nginx/sitehost && touch sitehosts.confvim sitehosts.conf输入以下内容server { li
docker nginx 部署 vue 项目详情
11-16
以下是使用Docker和Docker Compose部署Vue项目...4. 在Vue项目的根目录下运行以下命令启动服务： ```shell docker-compose up -d ``` 运行成功后，可以通过访问`http://localhost:8080`来查看Vue项目的运行结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值