Vue單工程多項目

背景

1. 原來項目使用的是Vue-cli2.x 生成的SPA項目模板來維護，隨着項目的迭代，每次創建一個SPA項目，下載一堆依賴，而且各個項目之間公共組件重合較多，依賴也沒有明顯的變化，這就促使需要一個工程來維護多個項目，來儘量複用項目之間的組件，樣式，打包依賴等等。
2. 爲了減少重複性的工作，提高代碼複用，更快更好的響應需求，因此做單工程多項目的實踐。

Vue-cli3.x

趁這次機會升級了Vue-cli的版本，對vue-cli3.x的使用這裏就不做介紹了。官網地址vue-cli3
安裝 vue-cli

npm install -g @vue/cli

創建項目

vue create helloapp

剩下的根據cli的提示創建適合自己的項目

實現過程

1. 創建project.js文件用來存儲要運行的項目名稱，可以通過命令行參數設置。

module.exports = {projectName:'xxx'}

2. 創建按環境區分的配置文件,獲取命令行項目名稱，設置node運行命令，執行相應的運行。

dev.js

let projectName = process.argv[2];
if (!projectName) {
    throw Error('Project name cannot be empty and must match the directory name');
}
let fs = require('fs');
let template = `module.exports = {projectName:"${projectName}"}`;
fs.writeFileSync('./config/project.js', template);
let exec = require('child_process').execSync;
exec('npm run d', {stdio: 'inherit'});

build.js

let projectName = process.argv[2];
if (!projectName) {
    throw Error('Project name cannot be empty and must match the directory name');
}
let fs = require('fs');
let template = `module.exports = {projectName:'${projectName}'}`;
fs.writeFileSync('./config/project.js', template);
let exec = require('child_process').execSync;
exec('npm run b', {stdio: 'inherit'});

3. 修改package.json
   新增npm run dev、npm run build 命令。
   npm run dev: 以開發模式運行項目
   npm run build: 打包編譯項目到本地dist目錄

"scripts": {
        "d": "vue-cli-service serve",
        "b": "vue-cli-service build",
        "dev": "node config/dev.js",
        "build": "node config/build.js"
    }

4. 新增projectConfig.js

const project = require('./project');
const config = {};
const projectName = project.projectName;
config[projectName] = {
    entry:`./src/projects/${projectName}/main.js`,
    template:`./src/projects/${projectName}/${projectName}.html`,
    fileName:`${projectName}.html`
}

5.創建vue.config.js文件
相關的配置在這個文件進行配置

publicPath: publicPath,
    outputDir: config.build.assetsRoot + '/' + project.projectName,
    assetsDir: process.env.NODE_ENV === "production" ?
        config.build.assetsSubDirectory : config.dev.assetsSubDirectory,
    indexPath: pageConfig.filename,
    lintOnSave: false,
    productionSourceMap: false,
    configureWebpack: config => {
        config.entry = {
            app: ['babel-polyfill', pageConfig.entry]
        }
    },
    chainWebpack: config => {
        config.output.filename('[name].js');
        config.plugin('html').tap(args => {
            args[0].template = resolve(pageConfig.template);
            args[0].filename = pageConfig.filename;
            return args;
        });
        config.resolve.alias
            .set('vue$', "vue/dist/vue.esm.js")
    }

使用devServer配置開發調試模式的內容

index: pageConfig.filename,
    contentBase: resolve('public'),
    historyApiFallback: {
        rewrites: [
            {from: /^\//, to: path.posix.join(config.dev.assetsPublicPath, pageConfig.filename)},
            {from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, pageConfig.filename)}
        ]
    }