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?

score 11 · Accepted Answer · answered Jun 17 '18 at 18:31

11

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

answered Jun 17 '18 at 18:31

Ruslan

752
6
14

4

Then I get a `MY_PROJECT_FOLDER\client\src in multi (webpack)-dev-server/client?http://192.168.56.1:8080/sockjs-node (webpack)/hot/dev-server.js ./client/src` Any clue on what might go wrong here? – Arno van Oordt Sep 15 '18 at 10:01

score 5 · Answer 2 · answered Feb 22 '20 at 00:41

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

FlorentinTh · Answer 3 · 2018-06-22T20:43:18.013

0

I'm looking to do the exact same thing with @vue/cli 3 and what Ruslan suggests didn't work. Plus, if you check in the doc it is written :

Usage: vue-cli-service serve [options]

Options:

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

I clearly can't imagine how it can works with the sample of code you provided.

edited Jun 22 '18 at 20:43

answered Jun 22 '18 at 20:35

FlorentinTh

28
5

Perhaps you are using an older version of vue-cli – Ruslan Jun 28 '18 at 18:19
if you run `vue-cli-service serve --help` then usage looks like this: `vue-cli-service serve [options] [entry]` – Ruslan Jun 28 '18 at 18:20

score 0 · Answer 4 · answered Jun 10 '20 at 22:07

@Mintonne answer almost work for me, but had problems with the 'copy' plugin modification. Adapted from an answer on this vue-cli issue https://github.com/vuejs/vue-cli/issues/1550

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")
            }
        }
    },
    devServer: {
        contentBase: path.join(__dirname, "client/public")
    },
    chainWebpack: config => {
        config.plugin('copy')
            .tap(([pathConfigs]) => {
                var conf = [{
                    from: path.resolve(__dirname, 'client/public'),
                    to: path.resolve(__dirname, 'dist')
                }]
                if (!pathConfigs) {
                    pathConfigs = conf
                } else {
                    pathConfigs.concat(conf)
                }
                return [pathConfigs]
            })
    }
};

How can I change main folders in VUE

4 Answers4

Linked