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

Question

我的应用程序分为API和UI两部分。 部署策略要求它们共享package.json文件。 文件结构如下：

My app is split into an API and a UI portion. Deployment strategy requires they share a package.json. The file structure looks like

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

因此，我尝试按照文档修改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我的应用程序入口在哪里？

- Caleb Jay

---

你在哪里运行npm run serve:ui？文件夹级别是什么？ - Sujil Maharjan

我是从根目录运行的，package.json在根目录中。抱歉，我已经解决了，感谢您抽出时间回复。 - Caleb Jay

Answer 1

根据这个 Github Issue，我发现你可以仅在命令行中传递自定义入口点。这对于build和serve都是正确的。在文档中还有一个单独的代码块演示了这一点。

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

我修改了我的脚本为

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

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

- Caleb Jay

Answer 2

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

- A1rPun

---

此功能适用于多页面应用程序，将提取所有代码而不考虑入口点。我认为 OP 想要打包两个单独的 SPAs。您能否添加有关如何使用“pages 选项”的信息，但省略每个包中打包所有文件的内容？ - Nathan

Answer 3

我相信你正在尝试使用Vue作为前端来运行或构建一个Node.js应用程序。我曾经遇到过类似的问题，通过在项目中安装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命令并实时启动node应用程序。

在根目录中创建一个名为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 是主要的Vue文件，编译后会生成到public/css

- rocky

---

谢谢您抽出时间，但是我能够在不添加另一个包的情况下解决这个问题。 - Caleb Jay