将vue项目部署到ngix需要注意的问题。

Vue项目部署至Nginx指南
最新推荐文章于 2024-09-23 19:36:00 发布
原创 最新推荐文章于 2024-09-23 19:36:00 发布 · 353 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了将Vue项目部署至Nginx的六个关键步骤：配置publicPath、修改config/index.js、使用vscode打包、放置dist文件、调整访问路径及启动Nginx，确保项目顺利上线。

将vue项目部署到ngix需要注意的问题。

1、build/utils.js文件中添加publicPath: '../../'

2、config/index.js文件夹中

3、在vscode中端里打包生成。npm run build

4、打包后，将dist文件夹放在nginx的html文件夹下

5、修改访问路径,由html改为html/dist/,端口号冲突也可进行修改

6、启动nginx就可以访问啦。

开启nginx
start nginx.exe

重启nginx
nginx.exe -s reload

停止nginx
nginx.exe -s stop    

退出nginx
nginx.exe -s quit   

zhb_qwfy
关注
基于VUE3+VITE+SpringBoot+Nginx部署项目之跨域配置等问题
群鸿
06-27 1411
无斜杠 (：保留匹配到的location中的路径部分，并将其附加在代理目标的URL后面。有斜杠 (：忽略匹配到的location中的路径部分，直接将请求路径附加在代理目标的URL后面。至此，结文。鸣谢：chatGPT 陪伴产品开发的每一天。
ubuntu上部署vue项目到ngixn中+SpringBoot项目+postgresql数据库
weixin_44231698的博客
07-26 1168
部署vue和springboot及postgres
Vue — 项目部署相关问题
丁鑫Dylan的博客
04-26 1879
       第一次负责把开发的vue项目部署到测试环境，很多东西一开始都搞不清，来来回回查阅了很多信息，最终还是成功将我们的项目在测试上跑了起来。对于之前没用过vue的人来说，过程还是有点心累。（一）修改配置文件       我们在开发的时候引用静态资源（图片，css文件等）都是使用的相对路径，这里举个栗子：这是开发的项目目录，我在about.vue里放了一张背景图（在style里编写的），路径...
nginx配置注意事项1
weixin_34238633的博客
12-10 162
Nginx（发音同 engine x）是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。由俄罗斯的程序设计师Igor Sysoev所开发，最初供俄国大型的入口网站及搜寻引擎Rambler（俄文：Рамблер）使用。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页伺服器中表...
Vue项目部署到Nginx服务器
极限突破者的博客
05-17 3428
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
【Nginx 】Nginx 部署前端 vue 项目
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
vue应用在nginx非根目录下的部署
PaulXerxes的博客
05-05 3643
一般部署node-moudle的vue应用在nginx上，直接将dist中打包好的文件部署在根目录'/'下并写好路由就可以正常运转了，但是非根目录下还要对webpack的打包路径、静态资源路径做一些修改，要不然服务器就找不到文件了= = 现在假设我们需要在服务器的/doge路径下部署vue应用，需要经过以下几步配置~ 1.项目router配置 如果项目有配置router，在/router/ind...
多个vue项目部署到Linux的ngix上面
最新发布
11-13
将多个Vue项目部署到Linux的Nginx上，可按以下方法操作： ### 修改Vue项目配置 - **修改`vue.config.js`**：为每个项目配置不同的`publicPath`，避免资源路径冲突。例如，项目A的`vue.config.js`可配置为： ```...
vue部署到Linux的ngix
11-13
将Vue项目部署到Linux系统的Nginx，详细步骤如下： ### 一、打包Vue项目 在本地开发环境中，使用Vue CLI的命令来打包项目，打包后会生成一个`dist`文件夹，里面包含了项目的静态文件。 ### 二、安装Nginx 1. **...
在nginx上部署vue项目(history模式)的方法
11-30
注意，在实际部署中，可能还需要根据服务器环境调整Nginx或Apache的其他配置，例如SSL证书、代理设置等。同时，确保Vue应用的静态资源路径与服务器上的实际路径一致，特别是当`assetsPublicPath`在`vue.config.js`或...
vue项目nginx部署
m0_38018775的博客
05-19 370
vue项目nginx部署1、执行npm run build打包vue项目，得到dist目录2、把dist目录拷贝到nginx的html目录下面3、配置nginx.conf文件4、启动nginx，测试 1、执行npm run build打包vue项目，得到dist目录 npm run build ##这里主要看你webpack里面配置的命令是啥，默认是npm run build 2、把dist目录拷贝到nginx的html目录下面 3、配置nginx.conf文件 主要配置下server里面的几个配置
2020-02-18 vue部署到nginx 注意事项
♀我爱摇滚，更爱金属乐♀
02-18 168
. nginx自身 nginx -t ps -ef | grep nginx //nginx启动否？ netstat -a | grep 80 //80端口开放否？ firewall-cmd --list-all //看看防火墙开了80？ firewall-cmd --add-service=http --permanent firewall-cmd --add-port=80/...
nginx部署vue项目
PhilsphyPrgram的博客
07-14 1万+
windows的nginx部署vue项目
Nginx 部署 Vue 指南
qq_64272546的博客
08-30 5813
为了提高安全性，建议为你的站点配置 HTTPS。但是因为环境或者其他的什么原因，每个人的部署情况可能都会不同，具体情况具体分析，欢迎大家分享自己遇到的问题。如果你的服务器启用了防火墙，确保允许 HTTP 流量通过。在 Nginx 的配置目录中创建一个新的配置文件。现在，你应该能够通过浏览器访问你的域名或 IP 地址来查看部署的 Vue 应用。将构建好的 Vue 项目文件复制到 Nginx 配置中指定的根目录。替换为你的域名或服务器的 IP 地址，并将。替换为你的 Vue 项目的构建目录路径。
如何将Vue项目部署至 nginx
weixin_64178283的博客
09-23 2736
如何将Vue项目部署至 nginx
Nginx部署vue项目
qq_40501683的博客
01-27 1万+
步骤一：项目打包 打开vscode终端 在终端输入 npm run build 这时可以看到生成dist文件夹，我们要放在服务器上的文件就在这， 步骤二：配置nginx 找到在官网下载的安装包。
nginx部署项目注意事项
weixin_39808181的博客
03-17 334
部署之后出现404页面：可以设置base属性的值，默认值: “/”，应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/” const router = new VueRouter({ mode: 'history', // 默认是hash模式 routes: [...], base: '/qylzWeb/' }) 静态文件找不到的情况：设置build下的静态资源路径 build: { // Template for index.
如何在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的内容如下 ...
vue项目部署问题
weixin_30622107的博客
02-18 466
网站部署如下： 运行vue项目报错： 未能加载文件或程序集“Microsoft.AspNet.TelemetryCorrelation”或它的某一个依赖项。系统找不到指定的文件 百度了好久都没找到答案，请教同事说父网站xinyan网站配置加：<locationpath="."inheritInChildApplications="false"></locatio...
Docker部署Vue项目详解：从创建到实战
本文将详细指导如何使用Docker部署Vue项目，Docker作为一个轻量级的容器化平台，能提供持续集成、版本控制、可移植性和安全性等优点，尤其适用于前后端分离的开发场景。以下是实现步骤： 1. **准备工作**: - 确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值