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

【问题标题】：How can I tell Vue-cli where my app's entrypoint is?如何告诉 Vue-cli 我的应用程序的入口点在哪里？
【发布时间】：2019-03-21 08:38:57
【问题描述】：

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

【问题讨论】：

你在哪里运行 npm run serve:ui？什么是文件夹级别？
我从 root 运行，package.json 在 root 中。抱歉，我已经想通了，不过感谢您抽出宝贵时间回复。

标签： javascript vue.js webpack vue-cli vue-cli-3

【解决方案1】：

我相信您正在尝试构建一个使用 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文件

【讨论】：

感谢您抽出宝贵时间，但我无需添加其他软件包即可解决此问题。

【解决方案2】：

您可以将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"
      }
    }
  },

【讨论】：

此功能适用于多页面应用程序，无论入口点如何，都会提取所有代码。我认为 OP 想要打包两个单独的 SPA。您能否添加有关如何使用pages option 的信息，但省略在每个包中打包所有文件？

【解决方案3】：

基于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",

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

【讨论】：