web-dev-qa-db-ja.com

アプリのエントリポイントがどこにあるかをVue-cliに伝えるにはどうすればよいですか？

私のアプリはAPIとUIの部分に分かれています。展開戦略では、package.jsonを共有する必要があります。ファイル構造は次のようになります

client/
       src/
           main.js
api/
package.json
vue.config.js

標準のvue-cliスクリプトを使用しています。

package.json

"scripts": {
  "serve:ui": "vue-cli-service serve",
  "build:ui": "vue-cli-service build",
  "lint:ui": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit"
}

npm run serve:uiを実行すると、

This relative module was not found:

* ./src/main.js in multi ./node_modules/@vue/cli-service/node_modules/webpack-dev-server/client?http://10.0.2.15:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

だから、私は docs に従ってvue.config.jsonを変更しようとしました：

vue.config.js

const path = require('path');
module.exports = {
    entry: {
        app: './client/src/main.js'
    }
}

今、私はエラーを受け取ります：

 ERROR  Invalid options in vue.config.js: "entry" is not allowed

アプリのエントリポイントがどこにあるかをvue-cliに伝えるにはどうすればよいですか？

javascriptvue.jswebpackvue-clivue-cli-3
5
Caleb Jay

ページオプション にentryを追加し、templateも含めるようにしてください。

vue.config.js

module.exports = {
  pages: {
    app: {
      entry: 'client/src/main.js',
      template: 'client/public/index.html',
    },
  },
};

この構成用の個別のファイルが気に入らない場合は、これをpackage.jsonファイルに追加することもできます。

package.json

  "vue": {
    "pages": {
      "index": {
        "entry": "client/src/main.js",
        "template": "client/public/index.html"
      }
    }
  },
2
A1rPun

実行しようとしているのは、フロントエンドとしてvue）を使用してnodejsアプリを構築していると思います。しばらく前と同様の問題が発生し、laravel-mixをプロジェクトにインストールして修正しました。 vueのコンパイルに役立ちます。_"scripts": { "start": "node app.js", "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js | nodemon app.js", "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js | node app.js" },_

したがって、npm run watchを実行すると、vue-cliコマンドが実行され、ノードアプリに電力が供給されます。すべてリアルタイムで。 _webpack.mix.js_という名前のルートディレクトリに新しいファイルを作成します

これらの行を挿入しますlet mix = require("laravel-mix"); mix.js("src/js/app.js", "public/js") .sass('src/scss/app.scss', 'public/css');

_src/js/app.js_は、_public/css_にコンパイルされるメインのvueファイル）です。

0
rocky