Question

我的应用程序分为一个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我的应用入口点在哪里？

Answer 1

基于此Github Issue，我发现您只能在命令行中传递自定义入口点。 build和serve都是如此。另请参见文档a single block of code demonstrating this.

Usage: vue-cli-service serve [options] [entry]

我将脚本更改为

    "serve:ui": "vue-cli-service serve client/src/main.js",

，现在它可以找到入口点。

Answer 2

我相信您正在尝试运行以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文件。

Answer 3

您可以将entry添加到pages option，并确保也包含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"
      }
    }
  },

如何告诉Vue-cli应用程序的入口点在哪里？

3 个答案: