How do I exclude a file (eg config file) in Vue.js?

Question

I've tried:

chainWebpack: config => {
    config.merge({
        module: {
            rules: [{
                test: /\.jsx?$/,
                exclude: {
                    exclude: [path.resolve(__dirname, "public/my-config.js")]
                }
            }]
        }
    })
}

Or

config.module.rule('js')
  .exclude({
    exclude: path.resolve(__dirname, "public/my-config.js")
  })

But it doesn't work.

I want to either import public/my-config.js with script tag in the pages/index.html or just import { config1, config2 } from '../public/my-config'.

I was able to use externals to not include a module in webpack though, but it's not quite intuitive with Vue.js.

I must have the my-config.js be available at dist/ so that it can be edited.

In Vue CLI projects, the public dir contains files that are only copied, not processed by webpack, which seems to be what you want. And it wouldn't make sense to exclude it from processing, since that should already be done. What are you really trying to exclude the file from? — tony19
– tony19, Commented Oct 28, 2018 at 21:07
@tony19 Yes. Thanks for the link to the Vue documentation. I was able to check with vue inspect > output.js that there is CopyWebpackPlugin that has from: '/path/to/my_project/public', to: '/path/to/my_project/dist' and ignore: ['index.html', '.DS_Store']. What I want to do is to not include the my-config.js file, but have my-config.js.gitkeep file and let the user create his/hers own my-config.js file by copying the file cp my-config.js.gitkeep my-config.js. I'll be using my own my-config.js file as well. — user3290525
– user3290525, Commented Oct 29, 2018 at 5:17
It may not matter if I have the whole dist/ and public/my-config.js in .gitignore which is the case, but I want to know about how to exclude a file, well, I guess specifically those that are in the public directory. — user3290525
– user3290525, Commented Oct 29, 2018 at 5:18

user3290525 · Accepted Answer · 2018-10-29 06:03:10Z

Refer to:

What I wrote in my vue.config.js:

const path = require("path");

module.exports = {
    baseUrl: ".",
    chainWebpack: config => {
        config.plugin('copy').tap((args) => [[
              {
                from: '/path/to/my_project/public',
                to: '/path/to/my_project/dist',
                toType: 'dir',
                ignore: [
                  'index.html',
                  '.DS_Store',
                  'config.data.js'
                ]
              }
          ]]
        );
    }
}

I used $ vue inspect > output.js then examined the output.js file for what arguments were used for the config.plugin('copy') which happens to be an instance of new CopyWebpackPlugin.

Allan Chain · Accepted Answer · 2020-02-11 10:30:49Z

3

Reference: https://github.com/vuejs/vue-cli/issues/2231#issuecomment-413441633

Try this, much simpler:

module.exports = {
  chainWebpack: config => {
    config.plugin('copy').tap(([options]) => {
      options[0].ignore.push('api/**/*')
      return [options]
    })
  }
}

answered Feb 11, 2020 at 10:30

Allan Chain

2,9751 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

How do I exclude a file (eg config file) in Vue.js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related