Is it possible to serve a folder other than src using Vue CLI?

Question

The reason I ask is that I am trying to serve my nyc instrumented folder when running my tests to gain code coverage.

I've been referencing Vue's documentation and I see...

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

https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve

But when I create a copy of src and run...

npx vue-cli-service serve src-copy/main.js

The app boots up with no errors, but it contains a ton of unexpected behavior across the app.

So I'm curious if I'm perhaps missing something in my command? Or is this just something that is not possible.

kissu · Accepted Answer · 2022-05-06 18:44:17Z

The reason for the unexpected behavior is that the Webpack config under the hood of Vue CLI 3 has hardcoded src as the name of the source directory.

So we need to change that value from src to (in your case) instrumented

How do we do this?

In your vue.config.js file we can use the chainWebpack method to do this declaratively. And as a bonus, we can make this conditional to whether we are in --mode test

  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'test') {
      config
        .entry('app')
        .clear()
        .add('./instrumented/main.js')
        .end();
      config.resolve.alias
        .set('@', path.join(__dirname, './instrumented'));
    }
  },

Now when you inspect your webpack.txt file, you will see...

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/instrumented',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './instrumented/main.js'
    ]
  }
}

For a deeper dive, reference: https://vuejsdevelopers.com/2019/03/18/vue-cli-3-rename-src-folder/

Collectives™ on Stack Overflow

Is it possible to serve a folder other than src using Vue CLI?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related