我需要执行: npm run build:prod 上述vue打包完成 二 配置nginx 1 下载nginx 下载网址 https://nginx.org/en/download.html 2 解压并把 dist 文件夹 复制过来 我这边改名为 myvue 3 修改配置 需要配置服务指定到我的前端项目 指定后端项目需要配置反向代理 打开conf文件夹 编辑 location / { root myvue; ind...
首先打包vue项目,本文使用oldx-admin-vue 项目地址:https://gitee.com/oldx/oldx-admin-vue.git切换至项目目录,打开终端输入 先npm install安装包之后执行 npm run build 1. 通过上面命令后打包好的静态资源将输出到dist目录中。如图所示 安装nginx 到nginx官方下载系统相关的nginx版本安装 目前最稳定的为: 下载...
在浏览器地址栏输入“http://localhost/” 部署 项目名称“dist”或其他 配置 重启 配置完重启nginx
https://nginx.org/en/download.html 修改nginx配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 location / { #root 对应的就是在服务器上前端资源的dist目录的全路径,即代表根路径 #root C:/nginx-1.25.3/html/dist; root E:/IdeaProjects/RuoYi-Vue/ruoyi-ui/dist; # 保持默认不要更...
1、VsCode编译Vue项目形成dist文件(作用是将Vue文件编译为浏览器认识的js、css、html文件) npm run build 2、将打包后的dist文件放进Nginx安装目录的html文件夹下(也可以放进其他地方,只要路径后续配置好一切都OK) 3、修改Nginx配置文件(nginx.conf) server { ...
简介:windows下使用Nginx部署Vue项目 第一步:到nginx官网上下载相应的安装包,并解压; 第二步:进入到nginx目录,在CMD使用“start nginx.exe ”进行nginx的启动,启动成功后,在“任务管理器”中会看到“nginx.exe”进程在,浏览器地址栏输入:127.0.0.1,会看nginx欢迎界面;。(如果发现进程中并没有,那么说明启动失败,...
放入vue build后dist中的代码 编辑nginx.conf文件 编辑 vue.config.js配置 配置 cmd进入Nginx的根目录 运行 启动命令:start nginx, 关闭命令:nginx -s stop 修改配置文件需要重载配置:nginx -s reload。 启动之后,打开http://localhost:80/nbtools就能看的效果 ...
1.安装nginx(window)http://nginx.org/en/download.html 解压即可 image.png 2.准备打包好的vue项目(dist) 这里dist文件目录在:E:\projects\demos\vueAdmin-template0\dist image.png 3.在nginx安装目录中找到nginx.confnginx-1.14.0\conf)进行修改
在Nginx 中配置 Vue 应用程序,需要编辑 Nginx 的配置文件。以下是具体的步骤: 打开C:\nginx\conf\nginx.conf文件。 在http节点下添加一个新的 server 配置: server { listen 80; server_name localhost; location / { root C:/path/to/your/dist; ...
将dist目录中的所有文件复制到Nginx配置的根目录(例如C:\path\to\your\dist)。 访问项目: 打开浏览器,输入http://localhost,即可访问部署的Vue项目。 总结 通过1、安装Node.js和npm,2、创建Vue项目,3、构建项目,4、配置服务器,5、部署项目文件这五个主要步骤,可以在Windows系统上成功部署Vue项目。确保每个步骤都...