WSL+electron+Vue環境でのエラーや作業メモ

■windowsからWSLファイルシステムへのアクセス

エクスプローラを開き、パスに \\wsl$ を入力


■XServer

 WSLで起動したGUIのアプリをWindows上で表示させるためには以下が必要。

https://sourceforge.net/projects/vcxsrv/

インストール後、xlaunchをwindows上で起動します。起動時にMultipleWindows、Start no clientを選択して、さらにClipBoard,Primary Selection、Native opengl、Disabl access controlを選択および追加パラメータとして「-ac」を追加する

■エラー

ERROR in src/background.ts:62:56

TS2571: Object is of type ‘unknown’.   

60 |       await installExtension(VUEJS_DEVTOOLS);   
61 |     } catch (e) {  >
62 |       console.error(“Vue Devtools failed to install:”, e.toString());       |                                                        ^   
63 |     }   
64 |   }   
65 |   createWindow();

■対処

アプリ名/src/background.tsの61行目を } catch (e : any) { に修正する

■WSL上のUbuntuからWindowsのexeファイルできない

ビルドするにはWineが必要(参照 https://wiki.winehq.org/Ubuntu)

sudo dpkg –add-architecture i386

sudo mkdir -pm755 /etc/apt/keyrings
sudo wget -O /etc/apt/keyrings/winehq-archive.key https://dl.winehq.org/wine-builds/winehq.key
sudo wget -NP /etc/apt/sources.list.d/ https://dl.winehq.org/wine-builds/ubuntu/dists/jammy/winehq-jammy.sources
sudo apt update
sudo apt install –install-recommends winehq-stable

WSLでvue+Electorn環境を構築

PowerShellを管理者権限で実行します。

PowerShellのWindowsで以下のように表示されたらPowerShellを最新版に更新してください。

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

なお、バージョンはコマンドで確認できますが、この時、古いバージョンが表示された時は古いバージョンのPowerShellと新しいバージョンが共存している状態となります。

PowerShellをスタートメニューから実行している場合、PowerShell7(x64)のアイコンが新たにあるはずですので、それを今後は実行します。

PowerShellで以下を実行してください。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart wsl –set-default-version 2

下記のコマンドで利用できるディストリビューションが表示されるので、ここではUbuntu-22.04をインストールします。

wsl –list –online

wsl –install -d Ubuntu-22.04

この実行時に以下のように表示された場合、にアクセスして「x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ」をダウンロードしてインストールしてから再度同じコマンド( wsl –install -d Ubuntu-22.04 )を実行します。

Installing, this may take a few minutes…
WslRegisterDistribution failed with error: 0x800701bc
Error: 0x800701bc WSL 2 ???????????? ??????????????????????? https://aka.ms/wsl2kernel ?????????

Press any key to continue…

ユーザ名とパスワードを求められますので、自由に決めて入力します。これはsudoコマンドで必要になるので覚えておきます。

上記でインストールしたものをアンインストールする場合は以下のようにします。

wsl –shutdown

wsl –unregister Ubuntu-22.04

「wsl -l -v」の実行により,Linux 用 Windows サブシステム・ディストリビューションの名前と既定の Linux サブシステムが確認できます。

「*」が既定の Linux サブシステムです。

上記完了後Ubuntuの画面が表示されるので、ここからはUbuntu上で実行します。

$ sudo apt-get update
$ sudo apt-get install build-essential libssl-dev

nvmをインストールします。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

source ~/.bashrc

nvm –version

nvmでNode.jsをインストールします。
nvmを使ってインストールできるNode.jsのバージョン一覧を表示します。

nvm ls-remote

ここではNode.jsのバージョン18.15.0を指定してみます。
nvm install 18.15.0

バージョン18.15.0を利用することを明示的に示します。
nvm use 18.15.0

念のためNodeのバージョンを確認します。
node -v

次にVueCLIをインストールします。

npm install -g @vue/cli

下記コマンドでVueがインストールされたことを確認します。

vue –version

下記を実行します。

npm install -g @vue/cli-service-global

以上でVue.jsアプリ作成に必要な準備は完了です。

矢印が向き合ったアイコンが出現

ITの技術サポートで飯を食って既に25年以上。
解決した問題は既に数えきれないが、敢えて今から自己満足にカウントアップしてみよう。(なぜ?(笑))
技術サポートでこれから食っていきたい人に少しでも伝授!

[Question.1] アイコンに意味不明な矢印が向き合ったアイコンが出現・・・
[自分の解決時間] 1分以内
[検索キーワード] windows10 アイコン 矢印2個
[キモ] 事象をそのまま単語検索することです