vue 3 + framework7 + cordova 안드로이드 실행 시 하얀 화면 문제

코도바를 웹 브라우저에서 실행 할 때는 문제가 되지 않았지만 안드로이드에서 실행 시킬때는 하얀 화면만 뜨는 이슈가 생겼습니다.

문제를 찾아보니 코도바에서 웹팩 5를 아직 지원하지 않기 때문에 생긴 이슈였고 웹팩 5를 4로 다운그레이드 하였습니다.

웹 브라우저는 잘 나오지만 오른쪽의 안드로이드는 화면이 나오지 않네요

 

 

다운그레이드는 자신의 cli버전과 사진에 나와있는 웹팩/ babel/ eslint/typescript/service 버전만 다운그레이드 해주시면 됩니다

사진에 보이는 버전을 확인하는 방법은 터미널에 npm ls webpack을 쳐주시고 cli 버전은  vue cli --version 입니다 ~

(다운그레이드를 할때 uninstal 하지 않고 그 위에 새로 다운로드 받아도 괜찮습니다!)

저는 cli 버전은 터미널에서 npm i -g @vue/cli@4.5.13  버전으로 다운그레이드 해주었고 

vue/cli 다운그레이드를 하는 과정에서 Missing write access 라는 에러가 나오면 sudo npm i @vue/cli@4.5.13 으로 변경해주시면 됩니다 ~ 

나머지는 VScode에 직접 가서 변경해주었습니다 ~

babel은 npm i @vue/cli-plugin-babel@4.5.13 버전으로 

vue/eslint는 npm i @vue/cli-plugin-eslint@4.5.13 버전으로 
vue/typescript는 npm i @vue/cli-plugin-typescript@4.5.13 버전으로 

vue/cliservice는 npm i @vue/cli-service@4.5.13 버전으로 

웹팩은 npm i webpack@4.46.0 버전으로 

바꿔줬습니다.

(지금 버전을 선택 한 가장 큰 이유는 4버전에서 가장 많은 다운로드 수를 가지고 있었기 때문 입니다 ~ )

vue.config.js

module.exports = { 

  configureWebpack : require('./webpack.config'), 

  pluginOptions: {
    cordovaPath: 'src-cordova'
  },

  Server: {
      proxy: {
          ...
      }
  },

  outputDir : './build'
}

 

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: "./src/main.ts", 
    devtool: "inline-source-map",
    module: {
        rules: [
            // https://webpack.js.org/guides/typescript/
            {
                test: /\.js$/,
                include: path.resolve('src'),
                use: [
                    {
                        loader : 'thread-loader',
                        options : {
                            // the number of spawned workers, defaults to (number of cpus - 1) or
                            // fallback to 1 when require('os').cpus() is undefined
                            workers: 2,

                            // number of jobs a worker processes in parallel
                            // defaults to 20
                            workerParallelJobs: 50,

                            // additional node.js arguments
                            workerNodeArgs: ['--max-old-space-size=1024'],

                            // Allow to respawn a dead worker pool
                            // respawning slows down the entire compilation
                            // and should be set to false for development
                            poolRespawn: false,

                            // timeout for killing the worker processes when idle
                            // defaults to 500 (ms)
                            // can be set to Infinity for watching builds to keep workers alive
                            poolTimeout: 2000,

                            // number of jobs the poll distributes to the workers
                            // defaults to 200
                            // decrease of less efficient but more fair distribution
                            poolParallelJobs: 50,

                            // name of the pool
                            // can be used to create different pools with elsewise identical options
                            name: 'my-pool',                         
                        }
                    }
                ],
            },
            { 
                test: /\.txt$/, 
                use: 'raw-loader' 
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            // {
            //     test: /\.json$/,
            //     loader: 'json-loader'
            // },
            // {
            //     test: /.jsonc$/,
            //     use: [
            //         {
            //             loader: `jsonc-loader`,
            //         },
            //     ],
            // },
        ]
    },
}