vue 一个项目内配置多个子项目

前言： 在一个公司内，经常要每个项目都要进行配置相同的代码，比如axios ，或者在main.js内写引入第三方的组件库，比如web的Elment-Ui。基本上是每新建一个项目就要引入一次。所有我就去网上查找能不能把这一部分给共用了，虽然最终实现了，但是还没试弄懂webpack的原理

1.新建一个vue-cli 我这边用的是3.0版本。目录 `{

• assets

• components

• modules

{
    modules这个文件夹内可以放项目A，项目B，项目C
}

• .env.development

• .env.production

• package.json

• vue.config.js

• .... }` 大概一个这样的目录有的没写出来。

第一步我们对vue.config.js进行配置

{
    const path = require('path');
    function resolve(dir) {
    return path.join(__dirname, dir)
    }
    
    /**
     * 项目的配置
     */
    const conf = require('./config/projectConfig')
    
    /**
     * 内置的文件系统模块得到的值 projectName.name  里面的值
     */
    const projectName = require('./config/project')
    
    module.exports = {
         publicPath: process.env.NODE_ENV === 'production' ? './'  : '/',
           chainWebpack: config => {
            /**
             * 这里可以写每个项目他引用的代码。比如我里面有一个项目叫admin，我要引用他里面有
             * 有一个文件夹。那么我在vue页面要写（src/modules/admin/文件夹名称） 但是现在就可以
             * 写成（_admin/文件夹名称） 
             */
                config.resolve.alias
                
                .set('@', resolve('src'))
                .set('_admin', resolve('src/modules/admin'))
                .set('_app', resolve('src/modules/app'))

            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({
                    bypassOnDebug: true
                })
                .end()
          },
           pages: conf.pages,
            devServer: {
        index: 'index.html', //serve默认启动页
        open: true, // 配置是否自动启动浏览器
        // proxy:{
        //     "/app":{
        //         target:"https://192.168.0.127:9443/sand/", //数据接口的地址
        //         changeOrigin:true,  // 允许跨域
        //         secure:false, // 允许运行在https上
        //         pathRewrite: { //如果你不想总是传递 /api,可以重写路径
        //             '^/app': ''
        //         }
        //     }
        // },
    },
    }
}

里面主要用到了一个

const projectName = require('./config/project')
const conf = require('./config/projectConfig')

所以我们要在主项目底下新建一个目录为config 在这个目录内新建4个JS。

1.build.js
{
    let projectName = process.argv[2]
    let fs = require('fs')
    fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
    let exec = require('child_process').execSync;
    exec('npm run build', {stdio: 'inherit'});
}
2.dev.js
{
    let projectName = process.argv[2]
    let fs = require('fs')
    fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
    let exec = require('child_process').execSync;
    exec('npm run serve', {stdio: 'inherit'});
}
3.project.js
{
    exports.name = 'admin'  // 这个值会随着启动哪个项目而跟着变，所以放空也可以
}
4.projectConfig.js
{
    const projectName = require('./project')
// console.log(JSON.stringify({ projectName }, null, 2))

const config = {
    admin:{
        pages : {
            admin: {
                entry: 'src/modules/admin/main.js', // page 的入口
                template: '/public/index.html', // 模板来源
                filename: 'index.html', // 在 dist/index.html 的输出
                // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
                title: '后台',
                // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。
                chunks: ['chunk-vendors', 'chunk-common',  'admin']
            }
        },
    },
    app:{
        pages : {
            app: {
                // 应用入口配置，相当于单页面应用的main.js，必需项
                entry: 'src/modules/app/main.js',

                // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
                template: 'public/index.html',

                // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
                filename: 'index.html',

                // 标题，可选项，一般情况不使用，通常是在路由切换时设置title
                // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
                title: 'app page',

                // 包含的模块，可选项
                chunks: ['chunk-vendors', 'chunk-common', 'app']
            }
          },
        },
    }
    const configObj = config[projectName.name]
    module.exports = configObj

}

配置好这几个我们在package.json 这个主目录内配置scripts这段

 "scripts": {
    "serve": "vue-cli-service serve", // 启动会被调用
    "build": "vue-cli-service build", // 打包会被调用
    "lint": "vue-cli-service lint",
    "dev": "node config/dev.js",        //启动项目
    "build-pro": "node config/build.js" //打包项目
  },

这里我们以启动admin这个项目为准，输入命令

• npm run dev admin 项目就会启动admin这个项目
• npm run build-pro admin 项目就会打包admin这个项目

具体大家可是看看配置的那些代码内的变化。具体怎么实现了！

我项目的截图，请忽略我的static文件夹

当然公共的部门可以提出到外面去，然后用刚刚配置的那个vue.config.js 内.set('@', resolve('src')) 进行配置一些公用的，在子项目拿主项目的资源也是这样拿的。

不喜勿喷，纯粹个人项目遇到的问题记录。

• 2020/02/10

• 武汉加油！！