vue-cli를vite로 변환

24969 단어 Vue.jsfrontendVitetech
vite 한마디로 매우 신속한 구축 도구다.
건축물을 초고속화함으로써 개발 시 생산성을 대폭 높일 수 있다.
vite 자체에 대한 상세한 설명은 일가을 보십시오. 이 글은 vue-cli가 개발한 프로젝트를 vite로 이전하는 방법을 소개합니다.
실제로 얼마나 앞당겨질지 신경 쓰실 것 같아서 프로젝트 체감이 얼마나 빨라졌는지 소개해 드리겠습니다.
조금 이해가 안 가요. 3초 정도 기다린 게 0.5초 정도였어요.
가져오기 전
before
가져오기 후
after
만약 순조롭게 진행된다면 한 시간 정도면 도입할 수 있을 것이다. 개발자가 매일 몇 백 번의 건설을 하는 것을 감안하면 이렇게 하는 것은 손실이 없다고 생각한다.(무엇보다 건설 속도가 빠르면 개발도 흥미로워진다😆)
그럼 가보자!
버전 정보
Vue 3.2.20(※ Vue2도 기본적으로 같은 방법으로 옮길 수 있지만 검증되지 않았습니다.🙏)
vite: 2.6.14

간단한 항목으로 옮기기


갑자기 이 프로젝트를 가져오면 힘들기 때문에 간단한 프로젝트로 옮깁니다.
기본적인 과도 방법을 이해함으로써 본 프로젝트를 자신 있게 도입할 수 있고 결과가 단축될 수 있기 때문에 추천합니다.
(급하니까 이 프로젝트에서 해보고 싶은 사람은 건너뛰세요.)

1. 샘플 프로젝트 제작

  • 우선 제작 프로젝트의 초기 형태.ts를 사용하고 싶어서 선택했어요Manually select features.
    • ~/g/g/k/L/vite (master ⚡☡+) vue create hello-world
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
    이렇게 간단한 프로젝트를 완성했습니다!
    신중하게 보기 위해서 vue-cli에서 작동하는지 확인하세요.
    yarn run serve
DONE  Compiled successfully in 2391ms                                                                                                                                                                                                                                                                      17:12:58
App running at:
- Local:   http://localhost:8080/ 
- Network: http://192.168.1.7:8080/

Note that the development build is not optimized.
To create a production build, run yarn build.
    vue-app

    2. vite 설치

  • vite를 설치하고cli-서비스를 삭제합니다.
    • yarn add -D vite @vitejs/plugin-vue
yarn remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service
  • 서버 명령을 vite로 바꿉니다.
    • "scripts": {
  "serve": "vite",
  "build": "vite build",
  "lint": "eslint src"
},

    3. index.수정 버전


    이어서 index.> 을(를) 루트 디렉토리로 이동합니다.vite의 루트 폴더에 있는 index.>을(를) 엔트리 포인트로 사용하기 위해서입니다. public/index.html → index.html이동하는 index입니다.""에 신청 지점으로 하는 라벨을 추가합니다.총 BASEURL도 삭제합니다.index.html
    ...
-<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<link rel="icon" href="/favicon.ico">
...
<div id="app"></div>
+ <script type="module" src="/src/main.js"></script>

    4. vite.config.jsの設定


    vite.vue 처리 파일을 위해 vite.config.js에 @vitejs/plugin-vue 설정을 추가합니다.
    // vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  server: {
    port: 8080,
  }
}
    간단한 프로젝트 전환 완료🎉
    빌딩이 빨라졌네🚀)
    ~/g/g/k/migrate-to-vite (master ⚡) yarn serve
yarn run v1.22.15
$ vite
Pre-bundling dependencies:
  vue
(this will be run only when your dependencies or config have changed)

  vite v2.6.14 dev server running at:

  > Local: http://localhost:8080/
  > Network: use `--host` to expose

  ready in 235ms.

    いざプロジェクトに導入


    그럼 드디어 이 프로젝트를 가져옵니다!

    1. viteのインストール


    먼저 vite를 설치합니다.
    yarn add -D vite @vitejs/plugin-vue

    2. vue-cli関連のpackageを削除


    @vue/cli-xxx 계열의 패키지가 필요하지 않기 때문에 모두 삭제합니다.
    package.json
    -"@vue/cli-plugin-babel": "~4.5.13",
-"@vue/cli-plugin-e2e-cypress": "^4.5.13",
-"@vue/cli-plugin-eslint": "~4.5.13",
- "@vue/cli-plugin-pwa": "~4.5.13",
- "@vue/cli-plugin-router": "~4.5.13",
- "@vue/cli-plugin-typescript": "~4.5.13",
- "@vue/cli-plugin-unit-jest": "~4.5.13",
- "@vue/cli-plugin-vuex": "~4.5.13",
- "@vue/cli-service": "~4.5.13",

    3. vue-cliコマンドをviteコマンドに修正


    package.json 내의 명령을vite로 수정합니다.
    package.json
    -"serve": "vue-cli-service serve",
-"build": "vue-cli-service build",
-"lint": "vue-cli-service lint",
+"serve": "vite",
+"build": "vite build",
+"lint": "eslint lint src",

    4. index.htmlを修正する


  • 다음은 index.> 을(를) 루트 디렉토리로 이동합니다.vite의 루트 폴더에 있는 index.>을(를) 엔트리 포인트로 사용하기 위해서입니다.public/index.html → index.html

  • 이동하는 index입니다.""에 신청 지점으로 하는 라벨을 추가합니다.총 BASEURL도 삭제합니다.
    (⚠️main.주의는 js가 아니라 ts입니다.⚠️)
    • index.html
    ...
-<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<link rel="icon" href="/favicon.ico">
...
<div id="app"></div>
+ <script type="module" src="/src/main.js"></script>

    5. vite.config.jsの設定


    vite.vue 처리 파일을 위해 vite.config.js에 @vitejs/plugin-vue 설정을 추가합니다.
    // vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  server: {
    port: 8080,
  }
}

    6. resolve.aliasを設定する


    tsconfig.json
    tsconfig.json
    "paths": {
  "@/*": [
    "src/*"
  ]
},
    설정paths시 직접 읽을 수 없기 때문에vite에 설정을 추가합니다.
    vite.config.json
    import vue from '@vitejs/plugin-vue'
import path from 'path'

export default {
  plugins: [vue()],
  server: {
    port: 8080
  },
+ resolve: {
+   alias: {
+     '@': path.resolve(__dirname, './src')
+   }
+ }
}

    7. 環境変数を書き換える


    vite에서 환경 변수의 이름, 읽기 방법은 다음과 같이 변경되었습니다.
    vue-cli
    vite
    변수 이름
    VUE_APP_XXXX
    VITE_APP_XXXX
    읽기 방법
    process.env.XXXX
    import.meta.env.XXXX
    여기에 따라 기존의 환경 변수를 개작한다.
    -VUE_APP_XXXX
+VITE_APP_XXXX

    -process.env.XXXX
+import.meta.env.XXXX
    이상으로 기본이전을 완료하였습니다.
    두드리기yarn serve 동작을 확인하세요!
    만약 무슨 오류가 발생하면 아래의 고장 제거를 참고하십시오😎

    トラブルシューティング


    다음은 자신이 이동하는 과정에서 겪는 문제와 해결 방법을 소개한다.

    XXXX.vue: Uncaught ReferenceError: Cannot access 'YYYY' before initialization


    구성 요소를 초기화하기 전에 인용할 수 없는 오류입니다.
    내 상황은 다음과 같은 index.ts를 통해 읽은 구성 요소에서 발생한다.
    import {
  Spacer
} from '@/common'
    common/index.ts
    export { default as Spacer } from './Spacer.vue'
# 他のexportがずらずら...
    이유コンポーネントで循環参照をしてると起きる問題のようです
    순환 참조를 찾기가 힘들어서 그냥 읽어서 해결했어요✅
    import Spacer from 'path/to/spacer.vue'

    ReferenceError: require is not defined


    좀 특이하지만 다음 구성 요소에서 Require를 사용하면 ReferenceError: require is not defined 실패할 수 있습니다.
    <nit-user-icon
  :src="require('@/assets/icons/guest-user.svg')"
>
    읽기 경로를 간단하게 바꾸면✅
    <nit-user-icon
-:src="require('@/assets/icons/guest-user.svg')"
+:src="/src/assets/icons/guest-user.svg"
>
    또한 css에서 ~@ 읽는 곳도 ~을 삭제해야 합니다.
    -background-image: url('~@/assets/background.png');
+background-image: url('@/assets/background.png');

    アクセスすると404が出てしまう


    페이지를 방문한 후 화면은 다음과 같다.
    404
    왜 URL의 경로에 .가 포함되어 있으면 제대로 처리할 수 없을까요?
    자신의 상황에서 Outh의 호출회/login/{Firebaseのログイントークン}는 이 영패에 대해 그렇게 한다.이 문제가 발생했습니다.
    처리 방법은 통과다.사용하지 않는 게 좋겠어요.
    매개 변수면 정상적으로 작동할 수 있어요./login?token={Firebaseのログイントークン}이렇게 하면 해결이 됩니다.✅
    こちらはバグっぽいので報告しておきました。

    Vercelのデプロイに失敗した


    Vercel에 Build 명령어를 쓴다면 잊지 말고 먼저 vite로 덮어쓰십시오.
    vercel

    console.logを削除したい


    문서의 terserOptions를 사용하여 이렇게 씁니다.
    vite.config.js
    ...
  build: {
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
    왜 효과가 없는지 모르겠다.
    참고こちら 사용rollup-plugin-terser 효과가 현저하다.(dev 환경에도 유효하기 때문에 환경 변수 등을 통해 진/fasel을 전환해야 합니다.)
    vite.config.js
    import { terser } from 'rollup-plugin-terser'
...
export default defineConfig({
  ...
  plugins: [
   terser({
      compress: {
        drop_console: true
      }
    })
 ]
})
    이상은!
    Good Hack🔥
    참고 자료🙏
    https://medium.com/nerd-for-tech/from-vue-cli-to-vitejs-648d2f5e031d
    https://vitejs.dev/
    비디오 js 컨트롤 게이트에 사용자 정의 아이콘과 관련 이벤트 추가
    VB 문자와 UTF8 형식 상호 변환

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage