一、 使用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.将打包后...
VUE3+VITE项目开发环境连接后端和打包部署连接后端设置是不一样的:一个是直接在vite.config.ts中配置,一是要用nginx来做代理;二是注意nginx的配置的地址后面的"/"。
start nginx 不报错说明启动成功,如图: 在浏览器输入localhost,显示如下页面说明能够正常启动: 二、同一个nginx部署多个项目 视频地址:https://www.bilibili.com/video/BV1fG4y1a7Sv/?spm_id_from=333.337.search-card.all.click&vd_source=5f425e0074a7f92921f53ab87712357b 这里虽然只是演示了两个最简单的页面...
方法一: 下载nginx,然后使用xftp传输到云服务器上 方法二: 命令行下载 http://nginx.org/download/ wget http://nginx.org/download/nginx-1.13.6.tar.gz 1. 2. 3. 2.2 解压nginx安装包 进入nginx目录 tar -zvxf nginx-1.13.6.tar.gz cd nginx-1.13.6 1. 2. 2.4 make编译安装nginx ./configure --...
实现步骤如下:1、调整vite.config.js配置文件 在该文件中,添加配置:base:'/project1'base:'/myapp...
随着vue3成为默认版本,国内的开发者接触vite越来越多,其中原因其实就一个字:快。详细请看 为什么选 Vite | Vite 官方中文文档 在这种组合项目在部署时候经常会遇到这样或那样的问题,接下对于部署的时候遇到的一些问题罗列以及一些解决方案: nginx部署如图: nginx配置
nginx部署如图: nginx配置 1.部署后资源文件访问不对 访问资源js路径404 解决方案:在vite.config.production.ts(生产环境的配置文件),对应的base属性设置要部署的目录‘/arcodesignpro/’,如下图: 参考文档:配置 Vite | Vite 官方中文文档 2.部署在非根服务目录下,如:部署在http://192.168.31.223:8090/arcodesig...
nginx部署如图: nginx配置 1.部署后资源文件访问不对 访问资源js路径404 解决方案:在vite.config.production.ts(生产环境的配置文件),对应的base属性设置要部署的目录‘/arcodesignpro/’,如下图: 参考文档:配置 Vite | Vite 官方中文文档 2.部署在非根服务目录下,如:部署在http://192.168.31.223:8090/arcodesig...
在proxy_pass配置中,需特别注意添加斜杠。如果没有斜杠,直接访问将无法成功获取后端API。总结以上,VUE3+VITE项目在开发环境与正式环境的连接设置存在差异:开发环境在vite.config.ts中配置代理,正式环境则通过nginx代理;此外,配置nginx时需注意后端服务器地址后的斜杠问题。
近期做一个单点登录项目,vue3+vite4打包项目,用nginx做二级目录代理托管项目。 问题描述 打包好项目发布上传到 nginx 后,浏览器访问,出现一下报错信息: Failed to load module script:Expected a JavaScript module script but the server respondedwithaMIMEtypeof"text/html".StrictMIMEtype checking is enforcedfor...