npm run build 默认打包结果在项目目录下的dist目录下 三、部署到nginx: 1、在你的申请服务器上安装nginx。 2、把dist目录下的文件,放在nginx下的html文件夹下。 如何放:不同的服务器(如:腾讯云,阿里云)做法不同,具体可以看腾讯云官网(或者百度); 四、nginx配置:(conf/nginx.conf文件) 1、服务器ip地址(域名)...
VUE3+VITE项目开发环境连接后端和打包部署连接后端设置是不一样的:一个是直接在vite.config.ts中配置,一是要用nginx来做代理;二是注意nginx的配置的地址后面的"/"。
"scripts": {"dev":"vite serve --mode development","build:prod":"vue-tsc --noEmit && vite build --mode production"} 打包: npm run build:prod 方式二 通过打包时的指令配置基础路径 不用配置环境变量,vite.config.ts不用配置base属性,只需要在router/index.ts中添加: constrouter =createRouter({ ...
1.将打包后文件的路径由绝对路径修改为相对路径，需要修改vite.config.js文件，添加base设置，值为”./”同时修改根目录下的index.html文件，将link和script标签中的路径前面加上.2.使用打包命令 npm run build 3.确保CentOS服务器上已经安装Nginx whereis nginx 查看nginx的位置 systemctl status nginx 查看nginx...
一、申请服务器：选择云服务提供商，如腾讯云或阿里云，购买服务器。根据购买流程，完成服务器的配置和部署。确保服务器安装了最新版本的Linux操作系统。二、打包：在项目目录执行`npm run build`命令，自动编译并构建项目。构建结果默认保存在`dist`目录下。三、部署到nginx：1. 在服务器上安装nginx。2....
vite vue3 打包nginx vue项目打包部署到linux 一. vue前端项目打包 使用vscode开发项目 ,在src的同级目录下创建一个vue.config.js文件(已有的话则修改相应内容),向其中写入配置信息并保存: module.exports = { publicPath: './', outputDir: 'dist',
本博客是总结本人在linux服务器上将vue项目部署到Nginx上的经历 一.准备好vue项目 1.安装vue环境 2.打包vue项目 进入你项目的文件夹,找到config文件夹下的index.js文件(config/index.js),打开修改里面assetsPublicPath为 ./(注意一定是build里面的,dev中也有这个配置,dev里的不用修改) ...
使配置生效 systemctl daemon-reload systemctl restart docker 制作镜像# 将文件上传到服务器上进行打包和发布,Dockerfile和要打包的文件需要在同一个目录下,确保服务器上已经安装Docker环境。 Dockerfile# # Docker image for vue application# VERSION 1.0.0# Author: swcode### 基础镜像,使用nginx镜像FROMnginx#...
解决方法是采用gzip压缩技术。在vite.config.ts中添加相应的插件，进行代码构建。经过这一步骤，你会发现dist文件的大小得到了显著压缩，加载速度明显提升。接着，转向Nginx部署。首先，你需要创建一个font_dockerfile.yml文件，将Nginx配置文件从容器的/etc/nginx复制到本地的./config/nginx目录。接着编写...
打包生成的页面文件会通过nginx进行后端请求。因此，nginx配置的正确性成为关键点。以下为关键配置代码展示：重点在于两个设置：1. /api/路径后是否跟有斜杠，需根据项目实际情况进行决定。2. proxy_pass 10.84.***.***:9199/; #替换为实际后端服务器地址和端口 在proxy_pass配置中，需特别注意添加...