質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

4073閲覧

npm run buildを行ってもVueファイルの内容が反映されません

mach-sim

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/05/19 01:50

前提・実現したいこと

Vue.jsとPHPで構成されたOSSアプリのプラグインを少しだけいじって機能を追加しようと思っています。
参考書を見ながらですがVueファイルに変更を加えrun npm buildをして動作を確認してみましたが変化した様子はなく、
エラーすらも発生しないので反映がされていないと考えています。
既存のアプリなのでpackage.jsonやconfigファイルなどはなるべく変えないほうがいいのかなと思っていますが...

発生している問題・エラーメッセージ

関係があるかわかりませんがビルド後の警告メッセージをのせておきます。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: workflowengine.js (1.56 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (1.56 MiB) workflowengine.js WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/

該当のソースコード

試したこと

開発用のフォルダ、サーバーなのでrun npm devではなくbuildにしていますが
ログにはVueのコンポーネントファイルがbuildされている記録があります。

補足情報(FW/ツールのバージョンなど)

コンパイラはwebpack 4.46.0 webpack-cli 4.6.0が使われています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

json

1{ 2 "name": "general", 3 "version": "0.1.0", 4 "private": true, 5 6 //ここ↓ 7 "scripts": { 8 "serve": "vue-cli-service serve", 9 "build": "vue-cli-service build", 10 "lint": "vue-cli-service lint" 11 }, 12 13 //ここまで↑ 14 15 16 "dependencies": { 17 "core-js": "^3.6.4", 18 "vue": "^2.6.11", 19 "vue-router": "^3.1.6", 20 "vuetify": "^2.2.11" 21 }, 22 "devDependencies": { 23 "@vue/cli-plugin-babel": "~4.3.0", 24 "@vue/cli-plugin-eslint": "~4.3.0", 25 "@vue/cli-service": "~4.3.0", 26 "babel-eslint": "^10.1.0", 27 "eslint": "^6.7.2", 28 "eslint-plugin-vue": "^6.2.2", 29 "sass": "^1.19.0", 30 "sass-loader": "^8.0.0", 31 "vue-cli-plugin-vuetify": "~2.0.5", 32 "vue-template-compiler": "^2.6.11", 33 "vuetify-loader": "^1.3.0" 34 }, 35 "eslintConfig": { 36 "root": true, 37 "env": { 38 "node": true 39 }, 40 "extends": [ 41 "plugin:vue/essential", 42 "eslint:recommended" 43 ], 44 "parserOptions": { 45 "parser": "babel-eslint" 46 }, 47 "rules": {} 48 }, 49 "browserslist": [ 50 "> 1%", 51 "last 2 versions", 52 "not dead" 53 ] 54} 55

run npm buildコマンドは静的ファイルの書き出しだったと思います!

サーバに上げる、htmlやjsファイルに変換するコマンドで、distフォルダあたりに生成されたような。。。
※フォルダ名は任意だったかもしれません。
index.html,favicon.ico,js,cssファイルがあればそこです。

https://qiita.com/yukibe/items/7520ec4d6f7e5086dd69

画面のテストしたいのであれば、
npm run serveコマンドで http://localhost:8080/に表示されたと思います!

vueですよね?nuxtだとまたコマンドがちょっと変わります。

投稿2021/05/19 02:32

編集2021/05/19 03:22
Tatsunosuke

総合スコア599

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mach-sim

2021/05/19 03:11

package.jsonの中にserveスクリプトがないのでrun serveはできない。と言われてしまいました。 package.json内に直接書き込んでもいいものでしょうか、、 [root@localhost files_sharing]# npm run serve npm ERR! Missing script: "serve" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-05-19T03_08_40_924Z-debug.log Nuxtは使っていません。
Tatsunosuke

2021/05/19 03:23 編集

あら。失礼しました。 今も専らNuxtなので、理解に誤りがあるかもしれません。 はい、書き込んで問題ありません。 回答にvueをcliでインストールした状態の package.jsonの状態を載せますね!
mach-sim

2021/05/19 04:03

仕様はVue CLIではなくwebpack4なのでそちらを記入したらrun serveが実行できました。まあ見事に8080には接続できませんでしたが自分がとても難しいことをやろうとしているのが理解できたので助かりました。
Tatsunosuke

2021/05/19 04:34

あ、見落としてました! 失礼しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問