How can I tell Vue-cli where my app's entrypoint is?

Question

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

I am using the standard vue-cli scripts.

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"
}

When I do npm run serve:ui, I get

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

So, I tried modifying vue.config.json as per the docs:

vue.config.js

const path = require('path');
module.exports = {
    entry: {
        app: './client/src/main.js'
    }
}

Now, I get the error:

 ERROR  Invalid options in vue.config.js: "entry" is not allowed

How do I tell vue-cli where my app entrypoint is?

Growing

Where are you running the npm run serve:ui? What is the folder level? – Kluge

I was running from root, package.json was in root. Sorry, I already figured it out, thanks for taking the time to reply though. – Growing

Answer 1

I discovered based on this Github Issue that you can pass a custom entrypoint only in the command line. This is true for both build and serve. See also in the documentation, a single block of code demonstrating this.

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

I changed my script to

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

and now it can find the entrypoint.

Growing

Answer 2

You can add the entry to the pages option and make sure you include the template too.

vue.config.js

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

If you don't like a separate file for this configuration you can also add this to a package.json file:

package.json

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

Tricornered

This feature is for multi-page apps, and will pull pack all code regardless of entry point. I think the OP wants to pack two separate SPAs. Can you add info on how to use the pages option but omit packing ALL files in each pack? – Chevrette

Answer 3

I believe you are trying to running are building a nodejs app with vue as frontend. I ran into some issues similar to that some time ago and I fixed it by installing laravel-mix to the project which helps me compile 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"
  },

So when i run npm run watch, it run the vue-cli command and power the node app. all in real time. Create a new file in the root directory named webpack.mix.js

Insert these lines:

let mix = require("laravel-mix");
mix.js("src/js/app.js", "public/js")
   .sass('src/scss/app.scss', 'public/css’);

src/js/app.js is the main vue file that compiles to public/css

Internationalize

Thanks for taking the time, but I was able to solve this issue without adding another package. – Growing