A preface.

Vue-cli3 builds a project, vuE-CLI3 builds a project without relevant configuration files and complex directory structure, and only generates the files needed to build the application. The following is the directory structure:

This configuration will be changed to webpack related configuration, so we need to create a vue.config.js configuration file in the root directory of the project (the same as package.json). Once this file exists, it will be automatically loaded by @vue/ CLI-service.

The modules folder is created under SRC. From now on, each module will be created in this folder. The other folders under SRC are common files for each module.



At this point, the directory structure of the project is adjusted.

Configure vue. Congfig. Js file

const path = require('path');
// In Node, the global variable process represents the current Node process. Process. env contains information about the system environment
const moduleName = process.env.npm_config_module; NPM run serve --module= module name, where NPM_config_xxx corresponds to NPM run serve -- XXX input

function resolve(dir) {
    return path.join(__dirname, dir); // Splice the directory. __dirname indicates the name of the directory where the current file resides
}
const isDevelopment = process.env.NODE_ENV === 'development'; // Development environment


const MODULE_LIST = ['lottery']; // Each new module name needs to be added here

function getPages(moduleName) {
    if (isDevelopment && moduleName) { // The development environment is packaged according to the module name passed in.
        return {
            index: {
                entry: `src/modules/${moduleName}/index.js`.Entry to // // page
                // template: 'public/index.html', // template source
                // filename: 'index.html', // output in dist/index.html
                title: 'My marketing tool demo${moduleName}`}}; }else {  // The production environment is packaged
        const modules = moduleName ? [moduleName] : MODULE_LIST;
        const pages = {};
        modules.forEach((item) = > {
            pages[item] = {
                entry: `src/modules/${item}/index.js`
            };
        });
        returnpages; }}module.exports = {
    outputDir: 'dist'.// Directory of production environment build files generated when NPM run build(package) is run.
    assetsDir: isDevelopment ? 'dev' : ' '.// Place the generated static resources (js, CSS, img, fonts) in the directory (relative to outputDir).
    pages: getPages(moduleName), // Multiple pages need to be configured options, each "page" should have a corresponding JavaScript entry file.
    productionSourceMap: false.// Production forbids displaying source code
    chainWebpack: (config) = > {
        config.resolve.alias
            .set('~imgPath', resolve('src/assets/images')); }};Copy the code

For local debugging, simply NPM run serve –module= module name will run the project.

Explanation: NPM run serve –module= XXX; if NPM run serve –module= XXX; if NPM run serve –module= XXX; Determine if the development environment is only to compile the current input module, so that the implementation of module packaging.

At this point, the configuration is complete