VUE3+VITE项目开发环境连接后端和打包部署连接后端设置是不一样的:一个是直接在vite.config.ts中配置,一是要用nginx来做代理;二是注意nginx的配置的地址后面的"/"。
一、 使用Vite创建Vue3项目 1.全局安装vite，使用命令npm install vite -g 2.创建vue3项目，使用命令 npm create vite@latest ,确认项目名 称，选择Vue及TypeScript 3. 使用用vscode打开项目，运行命令 npm install npm run dev 4.整个项目目录结构如下：5.访问页面 二、将打包项目发布到Nginx 1.将打包后...
配置文件修改重装载命令:nginx -s reload 至此一个本地并配有代理的服务器就完成了,只要在局域网内的用户都可以访问。 2020/5/18 这里补充一下,因为在生产环境打包的mock是不生效的,所以要打开发包,在package.json中写入脚本即可。"dev-build": "vue-cli-service build --mode development",可以创建.env.devel...
sudoaptupdatesudoaptinstallnginx 安装完成后,可以通过以下命令检查Nginx是否正在运行: sudosystemctl status nginx 如果Nginx没有运行,可以使用以下命令启动它: sudosystemctl start nginx 为了确保Nginx在系统重启后自动启动,可以使用以下命令: sudosystemctlenablenginx 2.2 项目目录结构与配置 在将Vue 3项目打包并部署到...
一、下载nginx 进入nginx官网直接下载即可:http://nginx.org/en/download.html 选择稳定版,我这里选择windows来演示: 下载完成之后,解压,进入nginx-1.24.0文件夹中,nginx目录如下: 主要文件目录介绍如下: conf:nginx的一些配置文件 html:前端的打包文件主要放在这个地方 ...
使用Vite创建一个Vue项目,点我查看如何创建 配置打包路径# 在Nginx中如果是二级目录,例如/web时,需要设置线上的打包路径 在项目跟路径下创建两个文件:.env.production、.env.development,写入一下内容: ##生产环境NODE_ENV = 'production' VITE_BASE_PATH = /form-designer/ ...
开发环境 vite vue3 1 下载 https://nginx.org/en/download.html Stable version 稳定版本 --->nginx/Windows-1.24.0pgp nginx文件夹一定要放在没有中文的目录中 2 nginx在windows系统中如何启动、重启、停止 在nginx文件夹中打开cmd (如果是powershell不能直接使用cmd命令: 输入cmd回车即可) ...
首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放的文件夹下 运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了: 然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下...
vue+vite项目部署到二级路径nginx配置方法 因为域名有限,所以想把vue项目部署在某个域名的二级路径上,例如:https://www.example.com/someapp/下 nginx的配置如下: location^~ /someapp/{ indexindex.html; alias/opt/someapp/; try_files$uri$uri/ /someapp/index.html;...
在proxy_pass配置中，需特别注意添加斜杠。如果没有斜杠，直接访问将无法成功获取后端API。总结以上，VUE3+VITE项目在开发环境与正式环境的连接设置存在差异：开发环境在vite.config.ts中配置代理，正式环境则通过nginx代理；此外，配置nginx时需注意后端服务器地址后的斜杠问题。