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

前提・実現したいこと

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が使われています。

行動規範の内容に同意します

回答1件

ベストアンサー

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は使っていません。