Vue3+TS+Vite 개발 기술: 프로젝트를 배포하고 온라인으로 전환하는 방법

Vue3+TS+Vite 개발 기술: 배포 및 온라인 연결 방법

1. 프로젝트 설정
시작하기 전에 먼저 Node.js와 Vue CLI가 설치되었는지 확인한 후 다음 명령을 실행합니다. 새로운 Vue3+TS+Vite 프로젝트를 생성하려면:

vue create project-name

다음으로 "수동으로 기능 선택"을 선택한 다음 "TypeScript"를 선택한 후 Enter를 눌러 설치하세요.

2. 개발 환경 구성

1. Vite 구성 파일 수정
   프로젝트 루트 디렉터리에서 vite.config.ts 파일을 찾아 다음 내용을 수정하세요.

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     base: './',
   })

   이를 설정한 후 프로젝트는 현재 경로를 사용합니다. 기본 경로로 압축하세요.

2. 배포 디렉터리 구성
   src/env/production.ts 파일을 열고 publicPath를 프로젝트를 배포하려는 디렉터리로 변경합니다. 예: src/env/production.ts文件，并将publicPath修改为你要部署项目的目录，例如：

   export default {
     publicPath: '/your-project-name/',
   }

   这样设置之后，打包后的文件将会自动放在/your-project-name/目录下。

三、项目构建与打包

1. 构建项目
   执行以下命令，将项目构建为可部署的静态文件：

   npm run build

   构建完成后，在项目根目录下会生成一个dist文件夹，里面存放着打包后的静态文件。

2. 本地测试
   可以通过以下命令在本地启动一个服务器来测试打包后的项目：

   npm install -g http-server
   cd dist
   http-server

   然后在浏览器中打开http://localhost:8080即可查看项目效果。

四、部署到服务器

1. 将打包后的文件上传到服务器上
   将dist文件夹中的所有文件上传到你的服务器上，可以使用FTP工具或者其他方法进行上传。确保文件上传到了正确的目录下。

2. 配置服务器
   在你的服务器上，需要配置一个nginx（或其他类似的服务器软件）来处理静态文件的请求。假设你使用的是nginx，则可以在配置文件中添加以下内容：

   server {
     listen 80;
     server_name your-domain.com;
   
     location / {
    root /path/to/your-project/;
    try_files $uri $uri/ =404;
     }
   }

   注意将your-domain.com替换为你的域名，/path/to/your-project/替换为你上传项目的目录。

3. 启动服务器
   重启nginxrrreee
이렇게 설정하면 패키지 파일이 /your-project-name/ 디렉터리에 자동으로 배치됩니다.
4. 
   
3. 프로젝트 구성 및 패키징




프로젝트 빌드

다음 명령을 실행하여 프로젝트를 배포 가능한 정적 파일로 빌드합니다.

rrreee

빌드가 완료되면 dist가 생성됩니다. 패키지된 정적 파일을 저장하는 프로젝트 루트 디렉터리 폴더. 🎜🎜🎜🎜로컬 테스트🎜다음 명령을 통해 서버를 로컬에서 시작하여 패키지된 프로젝트를 테스트할 수 있습니다. 🎜rrreee🎜그런 다음 브라우저에서 http://localhost:8080를 열어 프로젝트를 확인합니다. . 🎜🎜🎜🎜4. 서버에 배포🎜🎜🎜패키지 파일을 서버에 업로드🎜 dist 폴더의 모든 파일을 서버에 업로드하세요. FTP 도구나 다른 방법을 사용하여 업로드할 수 있습니다. . 파일이 올바른 디렉터리에 업로드되었는지 확인하세요. 🎜🎜🎜서버 구성🎜정적 파일에 대한 요청을 처리하려면 서버에서 nginx(또는 기타 유사한 서버 소프트웨어)를 구성해야 합니다. nginx를 사용한다고 가정하면 구성 파일에 다음 콘텐츠를 추가할 수 있습니다. 🎜rrreee🎜 your-domain.com을 도메인 이름으로 바꾸고, /를 바꾸세요. path/to/your-project/를 프로젝트를 업로드한 디렉터리로 바꿉니다. 🎜🎜🎜서버 시작🎜 nginx 서버를 다시 시작하여 구성을 적용하세요. 🎜🎜배포 확인🎜 도메인 이름이나 서버의 IP 주소를 엽니다. 모든 것이 정상이면 브라우저에서 실행 중인 프로젝트를 볼 수 있어야 합니다. 🎜🎜🎜요약🎜 위 단계를 통해 Vue3+TS+Vite 기반으로 개발된 프로젝트를 배포하고 온라인화하여 서버에서 실행할 수 있게 되었습니다. 이 글이 여러분에게 도움이 되기를 바라며, 여러분의 프로젝트가 원활하게 온라인에 진행되길 바랍니다! 🎜🎜위는 Vue3+TS+Vite 개발 기술입니다: 프로젝트를 배포하고 온라인으로 전환하는 방법입니다. 🎜🎜(위 글은 참고용이며, 구체적인 운영은 실제 상황에 따라 조정될 필요가 있습니다)🎜

위 내용은 Vue3+TS+Vite 개발 기술: 프로젝트를 배포하고 온라인으로 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!