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

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

WBOY
WBOY원래의
2023-09-08 12:54:201745검색

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
  4. 이렇게 설정하면 패키지 파일이 /your-project-name/ 디렉터리에 자동으로 배치됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.