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.

user_3290525 · Answer

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.

user_8810271 · Answer

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]
    })
  }
}

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

2 Answers