CODEWITHSUNDEEP
vue.jsvuejs3vue-cli
Stephen Carico
Stephen Carico

Reputation: 123

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

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.

Upvotes: 0

Views: 956

Answers (1)

Stephen Carico
Stephen Carico

Reputation: 123

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/

Upvotes: 2

Related Questions