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

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

您可以添加entry到页面选项并确保您也包含了template。

vue.config.js

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

如果您不喜欢此配置的单独文件，您也可以将其添加到package.json文件中：

包.json

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

Answer 2

基于这个Github问题，我发现您只能在命令行中传递自定义入口点。对build和都适用serve。另请参见文档中的单个代码块来演示此操作。

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

我将脚本更改为

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

现在它可以找到入口点。