Vue-cli: Allow user to configure the htmlPath (currently public/index.html)

[lbjones]

What problem does this feature solve?

I'd like to combine my vue frontend in the same project as my backend which is already making use of the /public folder. It would be nice if I could configure the path to serve out of a folder of my chosing, like /html or something.

What does the proposed API look like?

I believe it could be added to vue.config.js like this:

  // where to serve dev files
  devDir: 'public',

[lbjones]

Nevermind!

I just figured out how to do it configuring webpack directly. In vue.config.js:

const path = require('path');

module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config
      .plugin('html')
      .tap(() => [{
        template: path.resolve('html/index.html'),
      }]);
  },
};

The path seemed to be hard coded in /node_modules/@vue/cli-service/lib/config/app.js so I assumed I could not configure it, but somehow this code still works.

[andy265]

I think that more prefered way is merge your options with exist options.

.tap(([options]) => [Object.assign(options, {
    template: path.resolve('html/index.html'),
})]);

[KerryRitter]

I am trying to use vuejs in the same folder as a Laravel install, which has a public folder. I'm trying to build the vuejs code to public/dist with the following:

const path = require('path');

module.exports = {
    outputDir: 'public/dist',
    lintOnSave: true,
    chainWebpack: (config) => {
        config
        .plugin('html')
        .tap(([options]) => [Object.assign(options, {
            template: path.resolve('src/html/index.html'),
        })]);
    },
};

Interestingly enough, it copies the whole public folder to public/dist... which is a bit confusing, so here's an amazing screenshot:

Any suggestions?

[lbjones]

I am also using laravel on the backend. I changed what I originally had done as seen earlier on this thread. What I ended up doing is putting laravel in the root folder and the whole frontend in a folder called vue. Then when it builds, it dumps everything in public/assets. Then for hot code on dev, you need to use a proxy URL. Not sure if it's the easiest way to do it, but it works.

Here is my vue/vue.config.js file if it helps:

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  baseUrl: '/assets/',

  // where to output built files
  outputDir: '../public/assets',

  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  compiler: true,

  // whether to use eslint-loader for lint on save.
  // valid values: true | false | 'error'
  // when set to 'error', lint errors will cause compilation to fail.
  lintOnSave: true,

  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  configureWebpack: {},

  chainWebpack: (config) => {
    config
      .entry('app')
      .clear()
      .add('./src/index.js')
      .end();
  },

  // vue-loader options
  // https://vue-loader.vuejs.org/en/options.html
  vueLoader: {},

  // generate sourceMap for production build?
  productionSourceMap: false,

  // CSS related options
  css: {
    loaderOptions: {
      sass: {
        includePaths: [
          'node_modules', 'src',
        ],
      },
    },
  },

  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  // parallel: require('os').cpus().length > 1,

  // split vendors using autoDLLPlugin?
  // can also be an explicit Array of dependencies to include in the DLL chunk.
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  dll: true,

  // options for the PWA plugin.
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // configure webpack-dev-server behavior
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
    proxy: 'http://my-app.test',
    before: () => {},
  },

  // options for 3rd party plugins
  pluginOptions: {},

};

[lbjones]

My previous comment no longer works with the beta15 release. Change baseUrl to the following:

  baseUrl: process.env.NODE_ENV === 'production' ? '/assets' : '/',

[phambinh217]

@KerryRitter Dear,
I have same issue, have you fixed it