使用nginx部署Vue项目

最新推荐文章于 2024-05-12 19:23:22 发布
最新推荐文章于 2024-05-12 19:23:22 发布
阅读量498 收藏 1
点赞数 10
文章标签： vue.js nginx 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44656422/article/details/138487457
版权

前提是后端已经跨域！

下载nginx，在路径下使用cmd打开nginx，关闭nginx使用任务管理器details end task

把dist中的文件都放到html文件夹中 

 

打开conf，找到nginx.conf，编辑以下内容

 location就是刚才放dist文件的那个文件夹，index就是指向主页的那个文件。

我这里前端是用/api/来与后端通信的，后端直接是http://127.0.0.1:8000/getdata,而不是http://127.0.0.1:8000/api/getdata，所以我用

rewrite "^/api/(.*)$" /$1 break;

把api替换掉了，然后它的指向就正确了

nginx rewrite 用法，用rewrite去除URL中的特定参数-腾讯云开发者社区-腾讯云 (tencent.com) 

苏坡爱豆的笑容都没你的甜
关注
  • 10
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
nginx部署vue项目
01-20
一、打包vue项目 1、修改路径 修改config/index.js的assetsPublicPath为 ./（注意一定是build里面的，下面dev中也有这个配置） build: { // Template for index.html index: path.resolve(__dirname, '../dist/...
Nginx部署Vue项目
Fanger_travel的博客
03-01 2227
root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）如下图，<listen>项为nginx监听的端口，默认是80。（5）打开浏览器，输入网址：http://localhost:9528（假设配置文件中端口修改成9528）完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。包解压后会得到如下目录。
2024年前端最全vue项目如何部署到nginx服务器，2024年最新被面试的公司拒绝了,还能再去要求面试吗
最新发布
2401_84619986的博客
05-12 1157
wq。
nginx部署vue项目及nginx配置
lhyxm的博客
11-29 4213
nginx部署vue项目,vue.conf.js配置文件默认配置publicPath为根路径。，只需要打包好dist包，部署nginx即可，根据前端配置好的axios请求前缀。），需要在vue.conf.js配置文件配置publicPath，例如。时，需要配置配置nginx的location选项，将location的。不然会出现报错，找不到服务器静态资源。的方式请求nginx获取服务器的静态资源，(，配置拦截，跳转代理的后台接口即可。),而使用alias配置时，会使用。)之后，root配置会使用。
Vue项目部署（Nginx）
weixin_42067873的博客
09-05 1万+
vue项目部署
Luinx下安装nginx部署vue项目以及使用docker部署vue项目
03-19
Luinx下安装nginx部署vue项目以及使用docker部署vue项目
Vue项目部署Nginx配置文件 SSL
08-11
Vue项目结果build编译后，放在Nginx的html文件夹内，替换该配置文件，就可以在Nginx服务器上运行Vue项目
手把手教 Nginx 部署 Vue 项目
热门推荐
csdn_life18的博客
08-06 2万+
想必大家一定听说过 Nginx，若没听说过它，那么一定听过它的 同行 Apache 吧！Nginx 同 Apache 一样都是一种 Web 服务器。如果你还是对它不够了解，可以自己去深入的学习一下 Nginx 相关的知识，这里不做过多的介绍了，今天我们就来聊聊使用 Nginx 如何来部署我们开发好的前端 Vue 项目。......
Nginx部署Vue前端项目
he先森的博客
12-01 3553
系统环境：Mac Pro—10.15.7版本Nginx版本：1.19.6。
NGINX下部署VUE项目是如何执行的
m0_47905795的博客
02-28 1221
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文件的命令配置说明。
Vue（六） Nginx项目部署
Hello World!
05-26 3620
一.Nginx快速入门 1.Nginx 概述 （1）Nginx 介绍 Nginx 是一个轻量级、高性能的HTTP和反向代理web服务器 （2）Nginx 功能 2.Nginx 安装与控制 （1）Nginx Linux安装 （2）Nginx 控制指令 3.Nginx 目录结构分析与配置说明 （1）Nginx 文件目录结构分析 （2）Nginx 配置说明 4.Nginx 功能实现解决方案 二.Vue项目部署（Nginx） .....................
Nginx部署vue项目
qq_43548590的博客
09-19 221
【代码】Nginx部署vue项目。
nginx - 使用nginx部署vue项目到本地以及代理和负载均衡
qq_43886365的博客
09-29 8931
使用nginx部署vue项目到本地以及代理和负载均衡
nginx部署前端(vue)项目及配置修改
ywanju的博客
01-28 2474
linux部署vue项目
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）
qq_45796592的博客
09-26 1万+
nginx部署前端项目的详细步骤
使用nginx部署vue项目
07-27
要使用Nginx部署Vue项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Nginx。如果没有安装，可以通过包管理器（如apt、yum等）进行安装。 2. 打开Nginx的配置文件，通常位于/etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf。 3. 在配置文件中找到server块，并在其中添加以下配置： ``` server { listen 80; // 监听的端口号 server_name your_domain; // 填写你的域名或IP地址 location / { root /path/to/your/vue/project/dist; // 填写你的Vue项目的dist目录路径 index index.html; try_files $uri $uri/ /index.html; } } ``` 注意替换your_domain为你的域名或IP地址，并将/path/to/your/vue/project/dist替换为你的Vue项目的dist目录路径。 4. 保存并关闭配置文件。 5. 检查Nginx配置文件是否有语法错误： ``` nginx -t ``` 如果没有错误提示，继续下一步；如果有错误，检查配置文件并修复错误。 6. 重启Nginx服务： ``` sudo service nginx restart ``` 7. 现在你的Vue项目应该已经成功部署在Nginx上了。你可以通过访问your_domain来查看效果。 请注意，如果你的Vue项目使用了路由功能（例如vue-router），你还需要在Nginx配置中添加额外的配置以支持路由。具体的配置方法可以参考Vue官方文档或其他相关资源。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值