vue-cli 3.x 構建新項目，實現多頁，單頁webapp，並一鍵自動打包部署到測試環境

使用vue-cli 3.x構建新項目

以前使用vue-cli2.0構建的多頁項目，對腳手架擴展了一些功能，可是存在一些問題，趁如今升級了vue-cli 3.x順便把項目重構一下

擴展點

改造 vue 項目爲多頁（多模塊）、多應用，和單頁（單模塊）共存的項目
改造npm run dev命令，支持單模塊啓動調試服務 和 全量項目啓動調試服務
改造npm run build命令，改成構建指定應用並打包部署到不一樣的服務環境
複製代碼

爲何擴展？

vue-cli 2.0版本官方不支持多頁，且2.0使用的webpack構建任務不支持多線程以及DLL，全靠本身擴展，不便於維護。vue-cli 2.0在多頁數量較多的狀況下，無論本地熱更新仍是構建打包，都是很是慢的。 如今的工程大多存在多個子應用，且多個子應用一般使用一套組件，一套公共方法，可是子應用採用單獨發包迭代。因此支持多應用是很是有必要的

新建vue-cli 3.0項目

這個網上不少教程，這裏就說了，這篇文件講的很詳細
[使用 vue-cli 3 快速建立 Vue 項目](https://segmentfault.com/a/1190000014627083)
複製代碼

vue-cli 3.0官方支持多頁，重點在於vue.config.js文件的配置

const path = require('path');
// 新建一個multipage.js文件，用來處理vue加載模板的入口；
const pages = require('./config/multipage').getPages();
const env = process.env.NODE_ENV;

module.exports = {
    // 官方要求修改路徑在這裏作更改，默認是根目錄下，能夠自行配置
    baseUrl: env === 'development' ? '/' : './',
    lintOnSave: false,
    productionSourceMap: false,
    // 在多核機器下會默認開啓。
    parallel: require('os').cpus().length > 1,
    pages,
    css: {                // css相關配置
        sourceMap: false, // 開啓 CSS source maps?
        loaderOptions: {
            less: {
            javascriptEnabled: true
            }
        },             // css預設器配置項
        modules: false // 啓用 CSS modules for all css / pre-processor files.
    },

    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.module.rule('images').use('url-loader').loader('url-loader').tap(options => {
                options.name = 'static/img/[name].[hash:8].[ext]';
                return options;
            });
            config.plugin('extract-css').tap(() => [
                {
                    filename: 'static/css/[name].[contenthash:8].css',
                    chunkFilename: 'static/css/[name].[contenthash:8].css'
                }
            ]);
        } 
    },

    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.path = path.join(__dirname, './dist')
            config.output.filename = 'static/js/[name].[contenthash:8].js'
            config.output.chunkFilename = 'static/js/[name].[contenthash:8].js'
        }
        Object.assign(config, {
            // 打包時webpack不打包進去
            externals: [
                {'vue': 'window.Vue'},
                {'vue-router': 'window.VueRouter'}
            ],
            // 開發生產共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    'assets': path.resolve(__dirname, './src/assets'),
                    'common': path.resolve(__dirname, './src/common'),
                    'components': path.resolve(__dirname, './src/components'),
                    'pages': path.resolve(__dirname, './src/pages'),
                    'vue$': 'vue/dist/vue.esm.js'
                }
            }
        });
    }
};

複製代碼

說下配置文件踩的坑

// 1
if (process.env.NODE_ENV === 'production') {
    config.output.path = path.join(__dirname, './dist')
    config.output.filename = 'static/js/[name].[contenthash:8].js'
    // 這裏是不支持直接修改publicPath路徑的，必須用官方推薦的 baseUrl。
    // config.output.publicPath = './'
    config.output.chunkFilename = 'static/js/[name].[contenthash:8].js'
}

// 2.我配置的項目是打包時vue和vue-router不打包進去,爲了減小打包後的代碼體積(經過script引入vue), 
這裏你若是要打包在項目裏面 externals也能夠直接註釋掉讓(vue和vue-router參與項目打包);
Object.assign(config, {
    externals: [
        {'vue': 'window.Vue'},
        {'vue-router': 'window.VueRouter'}
    ],
    ....
})
複製代碼

最後打包出來的目錄格式是這樣的

multipage.js文件

const path = require('path');
const fs = require('fs');

const URL = process.env.url;            // 默認只加載一個文件 singlepage || multipage
const NODE_ENV = process.env.NODE_ENV;  // process環境變量

if (NODE_ENV === 'production' && URL === undefined) throw new Error('當前打包命令缺乏url參數！')

const config = {
    entry: 'index.js',
    html: 'index.html',
    pagesRoot: path.resolve(__dirname, '../src/pages')
};

const getRoutes = () => {
    const allRoutes = [];

    const findAllRoutes = (source, routes) => {
        const globFiles = fs.readdirSync(source);
        // 有URL 就默認加載那個指定的項目， 沒有就加載所有的 [ *.js ];
        let files = []
        
        if (URL) {
            const item = globFiles.find(item => item == URL);
            if (item === undefined) throw new Error('url項目不存在，請檢查！');
            files.push(item);
        } else {
            files = globFiles;
        }
        
        files.forEach(filename => {
            const fullname = path.join(source, filename);
            const stats = fs.statSync(fullname);
            // 不是文件目錄 return;
            if (!stats.isDirectory()) return;
            // 檢測給定的路徑是否存在。
            if (fs.existsSync(`${fullname}/${config.html}`)) {
                routes.push(fullname);
            } else {
                findAllRoutes(fullname, routes);
            }
        });
    };
    findAllRoutes(config.pagesRoot, allRoutes);
    return allRoutes;
};

const getPages = () => {
    const pages = {};

    getRoutes().forEach(route => {
        let filename = route.slice(config.pagesRoot.length + 1);
        pages[filename] = {
            entry: `${route}/${config.entry}`,
            template: `${route}/${config.html}`,
            // 兼容dev開發模式時 serve 全量項目和單個項目
            filename: URL ? config.html : `${filename}/${config.html}`
        };
    });
 
    return pages;
};

module.exports = {
    getRoutes,
    getPages
}
複製代碼

src 目錄下

package.json的依賴:

"devDependencies": {
    "@vue/cli-plugin-babel": "3.0.0",
    "@vue/cli-plugin-eslint": "3.0.0",
    "@vue/cli-service": "3.0.0",
    "cross-env": "^5.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "postcss-px2rem": "^0.3.0",
    "vue-template-compiler": "2.5.17"
  },
複製代碼

啓動項目 dev

1.  npm run dev  (啓動所有項目) 包含多頁項目 和 單頁項目
  
    2.  建議啓動單個項目，編譯時間短，啓動快 ( url=項目名 npm run dev )
複製代碼

打包項目並一鍵部署到測試環境

url=項目名 npm run testbuild
這裏打包後是使用node.js實現的自動上傳；config文件下的upload.js文件我以前介紹過能夠看我上一篇文章。
複製代碼

"scripts": {
    "dev": "vue-cli-service serve --open",
    "lint": "vue-cli-service lint",
    "testbuild": "vue-cli-service build && cross-env NODE_CONFIG=test node config/upload"
  },
複製代碼

cli3.x之後尤大進行了更深的封裝， 啓動或者打包都是依靠這個vue-cli-service去執行的；

// 源碼部分位置 node_modules\@vue\cli-service\bin\vue-cli-service.js
#!/usr/bin/env node

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
// 主要核心功能在這裏；
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]
// 這裏根據command的結果去執行是  run server 仍是run build ；
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

複製代碼

使用感覺

修改後總體使用下來，不管是本地開發編譯，仍是打包項目，提高都很明顯，感受至少提高80%；
緣由：cli3.x 升級了webpack4， 配置了多線程提高了速度，使用了緩存，有些公共文件不會被再次打包編譯；
複製代碼

歡迎加我qq一塊兒探討學習3544757498；

下一篇介紹本項目的技術選型和項目優化；