Add prop in vue.config.js to change vue src directory

[cthames]

What problem does this feature solve?

Having the Vue src files and directories in the /src directory works for simple projects, but for more complex projects it doesn't work as well. If you're including the Vuejs project in with another project with other programming languages that follow a different or same src dir causes problems. This feature will separate the vue code from the other project code (js/PHP/C#/Go/python/etc.)

Currently if you want to modify the vue src directory you need to modify vue.config.js:

1. change the alias @ path.

configureWebpack: {
        resolve: {
            alias: {
            '@': path.join(__dirname, vueSrc)
            }
        }
    }

2. Use the pages option to change their path:

pages: {
        app_main: {
            entry: path.join(vueSrc, 'main.ts'),
            template: path.join(vueSrc, 'public/index.html'),
            filename: 'index.html',
            title: 'Index'
        }
}

There might be other locations or properties that need to be updated with the change in src directory, but these 2 are the ones I've noticed so far.

There is the public directory that should also be considered. I assume it would also be moved into the specified Vue src directory or made into a separate web.config.js option.

If this is already doable without all the customization mentioned above, let me know.

What does the proposed API look like?

1. Add an option to vue.config.js called src or vueSrc or vueDir or srcDir or vueSrcDir or whatever is deemed appropriate.
2. Either assume the public folder is also in the new vueSrc path or create a separate publicSrc (or publicDir) option in vue.config.js.

The value would be starting the current directory so you don't need to include the whole path.

Example: if you wanted to change the src vue directory and files from src to webclient/vue.

Note: The developer would manually create the new webclient directory in the project root. Then rename the src directory to vue and move it into the webclient folder. The public directory would also be moved into webclient/vue.

vue.config.js

module.exports = {
    vueSrcDir: 'webclient/vue', // Default: /src
    publicDir: 'webclient/vue' // Default: /public
}

This is NOT something that would make cli-service / webpack move the files automatically.

The vue-cli would then change the vue src path where used by the cli-service.

The 3 places I've seen so far are:

1. resolve: { alias: { '@': pathToVueSrc } }
2. pages / entry / template
3. The public directory would also be located in the pathToVueSrc or another vue.config.js option.

Thanks!
Keep up the good work!

[LinusBorg]

I hesitant to add options for changing such basic and sensible defaults.

We provide a way to adjust webpack, it should be used.

I would rather like The community to come up with a collection recipes to do such adjustments than add option after potion to vue-cli

[cthames]

@LinusBorg These options to change defaults will probably lead to greater adoption (especially by beginners), as it will make integrating Vue much easier in existing and complex projects. Right now the vue-cli defaults (from what I can tell) are tailored for SPA. Most of the web doesn't run on SPA and most businesses aren't going to rewrite existing apps, thereby possibly stalling adoption of newer versions of VueJS.

Note: I've updated the above proposed option names to srcDir (or vueSrcDir) and publicDir to conform to the syntax similar to outputDir option.

[haoqunjiang]

See #1134 (comment)
This is by design.

Anyway, it is still reachable, though not that convenient.
We don't want users to change the folder structure unless absolutely necessary. Providing a first class option will inevitably lead to abuse IMHO.

[brhx]

But @sodatea why do you believe it will lead to abuse? Nobody has outlined the actual cons for this change other than just "we prefer it this way and don't want users to change it". You can configure many directory preferences such as the dist name and location, the devServer url (which literally changes how you can access the app in development).

Not changing the source directory seems like an unjustifiable preference that can't possibly lead to abuse any more than the current options provide.

In the current system, if you want to change the directory (and then do so in the vue.config.js), readers will have a much harder time understanding all of the required changes and opaque configuration and purpose, than if it was just:

sourceDir: "client"

Which is as immediately clear as options like devServer: port, assetsDir and outputDir.

[haoqunjiang]

@sam3d I think people should change the directory only after having fully understood what he/she's doing.

[brhx]

That reasoning doesn’t make sense though. To do something as trivial as choosing where my code comes from, why should I have to trawl through the Vue CLI codebase to figure out how to it nondestructively?

[yyx990803]

1. The CLI is designed for SPAs or projects that separates front-end from the backend (only communicating via API calls). You can place the Vue CLI project directory anywhere you want - but it should be separate from other code in your entire project. It's not recommended to mix server-side code inside a Vue CLI project root.

2. Given (1), there's little practical benefits in changing the src or public directory names, other than pure naming preference. Note that this is different form outputDir and devServer, which both serve practical purposes: outputDir affects how the project integrates with deployment; devServer is necessary for users with specific network environments.

3. We want to encourage a somewhat consistent source code structure across all Vue CLI projects so that users have an easier time jumping into a new project.

4. There is a maintenance cost in every feature added. As explained above, we'd rather spend time on features that bring more substantial improvements.