Additional public directory paths

[miljan-aleksic]

What problem does this feature solve?

When using vue-cli in a monorepo project there might be apps sharing the public folder content, at least partially. With the current static public folder those apps must duplicate that content.

What does the proposed API look like?

A public config option, allowing to set a array of paths that will be looked at for the content to be copied. The current public dir should be always considered and taken as priority.

[LinusBorg]

That shouldn't require much more than:

chainWebpack: config => {
  config.plugin('copy')
    .tap(([pathConfigs]) => {
      const to = pathConfigs[0].to
      pathConfigs[0].force = true // so the original `/public` folder keeps priority
 
      // add other locations.
      pathConfigs.unshift({
        from: 'some/path',
        to,
      })
     
     return [pathConfigs]
    })
}

[Miaoxingren]

const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    config.plugin('copy')
      .tap(([pathConfigs]) => {
        var conf = [{
          from: path.resolve(__dirname, './src/public'),
          to: path.resolve(__dirname, './dist')
        }]
        if (!pathConfigs) {
          pathConfigs = conf
        } else {
          pathConfigs.concat(conf)
        }
        return [pathConfigs]
      })

    config
      .plugin('html')
      .tap(args => {
        args[0].template = path.resolve(__dirname, './src/public/index.html')
        return args
      })
  }
}

I'm getting this error when I delete '/public' folfer.

-  Building for production... ERROR  TypeError: Cannot read property '__expression' of undefined
TypeError: Cannot read property '__expression' of undefined
    at Object.toConfig (e:\lib_project\cola_new\node_modules\webpack-chain\src\Plugin.js:38:38)
    at clean.Object.assign.plugins.plugins.values.map.plugin (e:\lib_project\cola_new\node_modules\webpack-chain\src\Config.js:125:61)
    at Array.map (<anonymous>)
    at module.exports.toConfig (e:\lib_project\cola_new\node_modules\webpack-chain\src\Config.js:125:40)
    at Service.resolveWebpackConfig (e:\lib_project\cola_new\node_modules\@vue\cli-service\lib\Service.js:194:34)
    at PluginAPI.resolveWebpackConfig (e:\lib_project\cola_new\node_modules\@vue\cli-service\lib\PluginAPI.js:103:25)
    at module.exports (e:\lib_project\cola_new\node_modules\@vue\cli-service\lib\commands\build\resolveAppConfig.js:28:25)
    at build (e:\lib_project\cola_new\node_modules\@vue\cli-service\lib\commands\build\index.js:115:50)
    at api.registerCommand (e:\lib_project\cola_new\node_modules\@vue\cli-service\lib\commands\build\index.js:64:13)
    at Service.run (e:\lib_project\cola_new\node_modules\@vue\cli-service\lib\Service.js:179:12)
    at Object.<anonymous> (e:\lib_project\cola_new\node_modules\@vue\cli-service\bin\vue-cli-service.js:22:9)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

[azampagl]

@LinusBorg Your solution works if --modern is not provided. Once it is provided, you get the same error @Miaoxingren .

[pathConfigs] becomes an empty array when --modern is provided on the cli. When a config is "forced" (@Miaoxingren 's example), you get the __expression error.

[LinusBorg]

@LinusBorg Your solution works if --modern is not provided. Once it is provided, you get the same error @Miaoxingren .

Yeah, the copy webpack plugin is skipped during modern mode as we only want to copy files once.

Can be fixed like this:

config.plugins.has('copy') && config.plugin('copy').tap(([pathConfigs]) => { ...

I'll close this request as we currently don't see this as something to add to the cli config.

For multiple plubc dirs, people can add paths like I showed, or simply add a new instance of the copy plugin.

[fvena]

In vue.config.js

const path = require('path');

module.exports = {
  ...
  configureWebpack: {
    devServer: {
      contentBase: [
        path.join(process.cwd(), './public'), 
        path.join(process.cwd(), './docs')
      ],
    },
  },
};