How can I change main folders in VUE

Question

I'm new in Vue. I just create vue project by vue create my-project-name.

works fine.

But how can I change the folder structure? wrap src and public in client folder?

app folders:
|-client
  |- src
  |- public
|- package.json

and still use all the cli features?

Answer 1

Change serve and build scripts in package.json:

vue-cli-service serve to vue-cli-service serve client/src
vue-cli-service build to vue-cli-service build client/src

And devServer.contentBase in vue.config.js

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'client/public')
  }
}

Answer 2

Recently stumbled on this issue and found a workaround. Ruslan's method did not work for me, unfortunately.

This is my basic full-stack folder structure.

In order to get it to work, I added the following to vue.config.js

const path = require('path')

module.exports = {
  pages: {
    index: {
      entry: 'client/src/main.js',
      template: 'client/public/index.html'
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'client/src')
      }
    }
  },
  chainWebpack: config => {
    config
      .plugin('copy')
      .use(require('copy-webpack-plugin'), [[{
        from: path.resolve(__dirname, 'client/public'),
        to: path.resolve(__dirname, 'dist'),
        toType: 'dir',
        ignore: ['.DS_Store']
      }]])
  }
}

This should

• Set the correct entry and template files.
• Restore the @ alias functionality.
• Copy files from the public folder to the dist folder.

Resources

• https://cli.vuejs.org/config/#pages
• https://github.com/vuejs/vue-cli/blob/bc3e4af3c0532d32ad53602546c2a91187b36948/packages/%40vue/cli-service/lib/config/app.js#L295-L306