安裝 nodejs 環境

安裝 vue-cli VUE的腳手架工具

在終端中輸入命令：npm install -g vue-cli

用 vue-cli 構建一個專案

-cd ~/Sites/MyWork/ 找到需要放專案的資料夾
-vue init webpack 專案名稱
基本不出意外的話專案是建立成功的，可能由於npm下載過慢，不動了之後，可以ctrl+c停掉，後面用淘寶映象cnpm下載。
目錄格式如下

調整目錄結構

對相應的配置檔案進行修改

#首先進入build資料夾下，在utils檔案中新增以下程式碼塊
{
// glob是webpack安裝時依賴的一個第三方模組，還模組允許你使用 *等符號, 例如lib/*.js就是獲取lib資料夾下的所有js字尾名的檔案
var glob = require('glob')
// 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相應的頁面路徑，因為之前的配置，所以是src資料夾下的page資料夾
var PAGE_PATH = path.resolve(__dirname, '../src/page')
    // 用於做相應的merge處理
var merge = require('webpack-merge')

//多入口配置
// 通過glob模組讀取page資料夾下的所有對應資料夾下的js字尾檔案，如果該檔案存在
// 那麼就作為入口處理
exports.entries = function() {
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        map[filename] = filePath
    })
    return map
}   
//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取page資料夾下的對應的html字尾檔案，然後放入陣列中
exports.htmlPlugin = function() {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let conf = {
            // 模板來源
            template: filePath,
            // 檔名稱
            filename: filename + '.html',
            // 頁面模板需要加對應的js指令碼，如果不加這行則每個頁面都會引入所有的js指令碼
            chunks: ['manifest', 'vendor', filename],
            inject: true
        }
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: 'dependency'
            })
        }
        arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
    }
}
 

#然後修改build/webpack.base.conf.js的入口配置
找到： entry: {
app: ‘./src/main.js’
}改為 entry: utils.entries(),
#繼續修改開發環境build/webpack.dev.conf.js
找到並註釋掉new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true
}),，然後在後面新增.concat(utils.htmlPlugin())

#同理修改build/webpack.prod.conf.js
找到並註釋掉new HtmlWebpackPlugin({
filename: config.build.index,
template: ‘index.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
//

https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: ‘dependency’
}),，然後在後面新增.concat(utils.htmlPlugin())

目前多頁面的配置已經完成，下面就是修改page中的內容，根據需要進行調整。

最後補充一個跨域的問題，修改config/index.js檔案如下
module.exports = {
dev: {

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { 
  '/api': {  //使用"/api"來代替"
    target: 'http://localhost:2208/', //需要訪問的地址 
    changeOrigin: true, //改變源 
    pathRewrite: { 
      '^/api': '' //路徑重寫 
      } 
  } 
},

URL地址可以寫為const $mainurl = “/api/……”;