2023.01.13.vue build

vue cil 사용하여 빌 드 후 배포시 참고 자료

https://cli.vuejs.org/guide/deployment.html

Deployment | Vue CLI

 

---

일단 배포는 미루고 빌드하며 문제가 생겼던 부분 해결한 방법에 대해서 적는다.

 

##  *.ico, *.jfif 이미지 파일에 대한 오류 ...

img1 [ ico, jfif 파일 에러 ]

webpack을 설치하려다가 기존 vue 프로젝트에 적용하는 것은 단순히 여러 글을 참고해서

설정 파일을 따라서 작성하는 것만으로는 적용할 수 없겠구나 라는 것을 깨달았다.

 

그래서 다시 package.json > scripts > build 부분을

webpack 에서 다시 기본값인 vue-cli-service build 로 수정하였다.

 

그리고 터미널에서

npm run build 실행하였으나 위 img1 과 같은에러가 발생하였다.

ico, jfif 파일을 로더에서 처리할 수 없어서 발생한다고 한다.

로더 설정을 수정하거나 추가하여 ico, jfif 파일도 변환 가능하도록 해야 한다.

 

또한 기본 vue cli 에 포함된 webpack을 확인하여 vue.config.js에 추가하거나 수정 가능한 것을 알게 되었다.

vue inspect 명령어를 사용해서 현재 프로젝트에 설정된 웹팩 옵션들을 확인 할 수 있었다.

터미널에 위 명령어 사용 시 내용이 많으므로, 아래와 같이 다른 파일에 저장하여 확인 하도록 한다.

vue inspect > options.js

options.js 파일에서 내용을 검색하여 아래와 같은 image 부분을 확인 할 수 있었다.

img2 [ vue inspect - config.module.rule('images') ]

해당 부분을 참고해서 vue.config.js 내부에 추가하였으나 type 관련 에러가 발생하여

최종적으로 추가한 설정은 아래와 같다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.(ico|jfif|png|jpe?g|gif|webp|avif|svg)(\?.*)?$/,
          type: 'asset/resource',
          use: [
            {
              loader: 'file-loader',
            },
          ],
          generator: {
            filename: 'img/[name].[hash:8][ext]',
          },
        },
      ],
    },
  },
});

(최대한 빠른 시일내에 해당 에디터를 좀 고치거나 css를 손보거나,,,영 불편하다)

 

vue.config.js 설정 수정한 후 다시 빌드 시 정상적으로 완료되는 것을 확인 가능하다.

 

 

참고 링크

https://cli.vuejs.org/config/#vue-config-js

Configuration Reference | Vue CLI

https://joshua1988.github.io/vue-camp/webpack/project-setup.html

Project Setup | Cracking Vue.js

https://cli.vuejs.org/config

Configuration Reference | Vue CLI