ブログ

割とコンピュータよりの情報をお届けします。

2018年7月26日

vue-cliでインストールしたwebpackなどでnpm run buildでできたファイルイをfile://で使う

npm run build
を実行した後,Opening index.html over file:// won't work
と表示が出ていたのでできないのかと思っていたが,

これは,config/index.jsのbuildのオブジェクトのassetsPublicPathを'./'に変更すると回避できる
つまり,distのindex.htmlがドキュメントルートに来なくなても,file://であっても使用できるようになる。

最近のChromeはfile://〇〇であってもhttpsを使用していない旨の警告「このサイトへの接続は保護されていません」と表示される。

ちなみにwepack-dev-serverを使用する場合の設定はconfig/index.jsの上の方に devというオブジェクトに記述する。

ポート番号は標準は8080だが,変更できる。

 

ところで標準ではwebpack-dev-serverにネットワーク内の他のクライアントからアクセスできない。おそらくhost: 'localhost'が原因なのではと思っているが,うまく回避できていない。

≫ 続きを読む

2018/07/26 コンピュータ   TakeMe

vue-cliをnpm install -D vue-cliでインストールに失敗

vue-cliのインストールの説明ではnpm install -g vue-cliでインストールと書かれているが,npm install -D vue-cliでできないのかを確認していてハマった。

先にうまくいった手順の例を説明すると(node-v10.2.1-win-x64)

npm init -y
npm install -D vue-cli
npm install -D vue
npm install -D webpack
npm install -D webpack-dev-server
npx vue init webpack my-project
cd my-project
npm install
npm run dev

たぶん npm install -D vue,npm install -D webpack,npm install -D webpack-dev-serverなどは関係ないと思われるが念のためここで実行しておいた。

npm init -y

の後にpackage.jsonの内容をいじってからnpm install -D vue-cliを実行しているとnpx vue init webpack my-projectで警告がでてnpm installで失敗してしまっていた。(3週間考えた挙句棚上げにしていた。)

ただし,うまくいった理由はpackage.jsonをいじらずに次の操作に行ったからか?
vueやwebpackを明示的にインストールしないといけないのかネットワークの都合なのかは定かではない。

インストール自体は数十分間で結構時間がかかる操作だった。(回線速度による)

≫ 続きを読む

2018/07/26 コンピュータ   TakeMe