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的配置的地址后面的"/"。
在将Vue 3项目打包并部署到Nginx之前,需要了解项目的目录结构和配置文件。一个典型的Vue 3项目目录结构如下: my-vue-app/├── node_modules/├── public/│ ├── index.html│ └── favicon.ico├── src/│ ├── assets/│ ├── components/│ ├── App.vue│ └── main.js├── ...
方法一: 下载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 --...
vite vue3 打包到Linux 环境nginx需要的配置 linux部署vue项目到nginx,本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历一.准备好vue项目1.安装vue环境2.打包vue项目进入你项目的文件夹,找到config文件夹下的index.js文件(config/index.js),打开修改里面a
1、npm run build 打包时ts校验报错,修改package.json里的build节点。 # 修改package.json里的"build": "vue-tsc --noEmit && vite build" 为 "build": "vite build"。"scripts": {"dev":"vite","build":"vite build","preview":"vite preview"}, ...
一、下载nginx 进入nginx官网直接下载即可:http://nginx.org/en/download.html 选择稳定版,我这里选择windows来演示: 下载完成之后,解压,进入nginx-1.24.0文件夹中,nginx目录如下: 主要文件目录介绍如下: conf:nginx的一些配置文件 html:前端的打包文件主要放在这个地方 ...
1、调整vite.config.js配置文件 在该文件中，添加配置：base:'/project1'base:'/myapp' // 此处和...
近期做一个单点登录项目,vue3+vite4打包项目,用nginx做二级目录代理托管项目。 问题描述 打包好项目发布上传到 nginx 后,浏览器访问,出现一下报错信息: Failed to load module script:Expected a JavaScript module script but the server respondedwithaMIMEtypeof"text/html".StrictMIMEtype checking is enforcedfor...
nginx部署如图: nginx配置 1.部署后资源文件访问不对 访问资源js路径404 解决方案:在vite.config.production.ts(生产环境的配置文件),对应的base属性设置要部署的目录‘/arcodesignpro/’,如下图: 参考文档:配置 Vite | Vite 官方中文文档 2.部署在非根服务目录下,如:部署在http://192.168.31.223:8090/arcodesig...