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

Question

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

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

我正在使用标准的 vue-cli 脚本。

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

Answer 1

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

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

我将脚本更改为

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

现在它可以找到入口点。

Answer 2

您可以将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 3

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