創建項目

使用 vue-cli 創建一個項目

$ vue init webpack vue-multiple-demo

根據控制臺的提示，填寫相關信息即可。創建完成后，進入該項目根目錄并安裝依賴。

$ cd vue-multiple-demo
$ npm install

由于是開發多頁面應用，該工程就沒有配置 vue-router。

最簡示例

通過 vue-cli 創建的項目，默認是開發單頁應用。如果希望開發多頁面，需要調整部分腳本的配置。

入口

在 src 目錄下新建一個 demo.js，為方便起見，直接將 main.js 中的內容復制過去。然后，修改 build/webpack.base.conf.js 的 entry 為多個。

entry: {
  app: './src/main.js',
  demo: './src/demo.js'
},

模板

在工程根目錄下新建一個 demo.html 文件，同樣將 index.html 的內容復制過去。為了區分開來，只編輯下 <title> 的內容。

<title>demo</title>

發布地址

在 config/index.js 的 build 配置下，新增一條記錄。

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

生產環境配置

調整 build/webpack.prod.conf.js 的 plugins 中，關于 html 的配置。

修改

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',
  chunks: ['manifest', 'vendor', 'app']
}),

這里主要有兩處改動

• filename 直接寫死

• 為防止加載不必要的 js，添加 chunks 配置。

新增

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.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',
  thunks: ['manifest', 'vendor', 'demo']
}),

預覽效果

這里不啟動本地服務，所以需要修改下靜態資源的加載路徑，即將 config/index.js 中 build->assetsPublicPath 修改為 ./。

assetsPublicPath: './',

構建應用

$ npm run build

直接打開 dist 目錄中的 html 文件，即可預覽效果。

小結

至此，開發多頁面的最簡示例就完成了。

進一步優化

實際開發中，頁面的數量較多，因而需要批量處理以下配置。

文件目錄

源碼部分 src 的目錄結構如下

• assets

• logo.png

• components

• HelloWorld.vue

• entries

• index.js

• list.js

• templates

• index.html

• list.html

按照約定

• entries 用于存放頁面入口的 js 文件

• templates 用于存放頁面的模板 html 文件

讀取目錄

為方便讀取頁面目錄，這里使用 glob 擴展一個方法。

$ npm install glob --save-dev

安裝完依賴后，在 build/utils.js 中添加方法

const glob = require('glob')

// 遍歷指定目錄下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

修改配置

build/webpack.base.conf.js

entry: utils.getEntries('./src/entries/*.js'),

build/webpack.base.prod.conf.js

刪除原有的 HtmlWebpackPlugin 相關配置，在文件結束之前遍歷添加相關配置即可。

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    thunks: ['manifest', 'vendor']
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

由于輸出的地址不在這里配置，之前的刪不刪除都不影響。但是，調整了目錄結構，頁面中加載靜態資源的路徑也要做出調整。

assetsPublicPath: '../',

構建并預覽

$ npm run build

構建完成后，直接使用瀏覽器打開 dist 目錄下的 html 文件即可預覽效果。

總結

簡單總結以下，使用 vue-cli 開發多頁面應用的幾個關鍵點。

• 多入口

• 多個 HtmlWebpackPlugin

• 靜態資源的路徑

此文中介紹的配置，不一定適用于所有的開發場景。優化更多進一步的細節，還是要在實際開發中不斷實踐。

相關推薦：

vue構建多頁面應用實例代碼分享

Vue-cli創建單頁面到多頁面的方法實例代碼

vue cli重構多頁面腳手架實例分享

以上就是vue-cli開發多頁面應用的簡單示例的詳細內容，更多請關注php中文網其它相關文章！