Vue-cli: Additional public directory paths

Created on 12 Jun 2018 · 5Comments · Source: vuejs/vue-cli

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.

feature request

Source

miljan-aleksic

Most helpful comment

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

LinusBorg on 2 Jul 2018

👍4

All 5 comments

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

LinusBorg on 2 Jul 2018

👍4

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:

Miaoxingren on 13 Jul 2018

👍2

@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.

azampagl on 10 Sep 2018

@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.

LinusBorg on 10 Dec 2018

In vue.config.js

const path = require('path');

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