Q&A
ホストOS：Windows10
ゲストOS：CentOS7
Vagrantを使用
Vue.jsを学習しようとCentOSにNode.jsやvue-cliなどをインストールして環境を作ることができました。
Node.js v8.12.0
npm 5.7.1
vue init webpack-simple my-project cd my-project npm i --no-bin-links --no-optional npm run dev
これでCentOS上でwebpack-dev-serverが起動し、Windows10からポート転送でアクセスするとVue.jsのサンプルページが開きます。
ここまで来るだけで苦難の連続でしたがもう一つ問題がありました。
Webpack-dev-serverはソースを更新すると自動で更新してくれるみたいですが、残念ながらうまくいきません。
自動的に再読込しないくらいなら別に構いませんが、ソースを更新した後にwebpack-dev-serverを停止させてもう一度立ち上げ直さないと反映されません。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>my-project</title> 6 </head> 7 <body> 8 <div id="app"></div> 9 <script src="/dist/build.js"></script> 10 </body> 11</html>
これはプロジェクトと一緒に作成されたindex.htmlになりますが、ここに記述されている build.js が更新されないのでページが更新されないのは予想がつきます。
本来であればソースの変更を検知して自動的にbuild.jsが再作成されるものだと思いますがうまくいかないのはどうしてでしょうか？
以下はpackage.jsonです
json
1{ 2 "name": "my-project", 3 "description": "A Vue.js project", 4 "version": "1.0.0", 5 "author": "maekawa", 6 "license": "MIT", 7 "private": true, 8 "scripts": { 9 "dev": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot", 10 "build": "node_modules/cross-env/dist/bin/cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules" 11 }, 12 "dependencies": { 13 "vue": "^2.5.11" 14 }, 15 "browserslist": [ 16 "> 1%", 17 "last 2 versions", 18 "not ie <= 8" 19 ], 20 "devDependencies": { 21 "babel-core": "^6.26.0", 22 "babel-loader": "^7.1.2", 23 "babel-preset-env": "^1.6.0", 24 "babel-preset-stage-3": "^6.24.1", 25 "cross-env": "^5.0.5", 26 "css-loader": "^0.28.7", 27 "file-loader": "^1.1.4", 28 "vue-loader": "^13.0.5", 29 "vue-template-compiler": "^2.4.4", 30 "webpack": "^3.6.0", 31 "webpack-dev-server": "^2.9.1" 32 } 33}
scripts のコマンドはフルパスで書かないと動かなかったので修正しています。
正直Vagrantを使ってVue.jsを動かすのはうまくいかないことばかりで大変でした。
同じような環境で開発している方がいましたらご教授願います。
回答1件
0
ベストアンサー
webpack-simple テンプレートには HMR (Hot Module Replacement) に関する設定が入っていないので、自動更新されません。
古いバージョンの Vue CLI を使わずに、 Vue CLI 3 を導入するのが手っ取り早いです。
なお、 Node.js を v8.9 以上のものにする必要があります。
sh
1npm install -g @vue/cli 2vue create my-project
投稿2018/12/17 10:10
総合スコア2161
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/17 10:38