vue-cli開發多頁面應用的簡單範例

建立專案

使用 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> 的內容。

<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

擴充一個方法。 <pre class="brush:php;toolbar:false">$ npm install glob --save-dev</pre>安裝完依賴後，在

build/utils.js

中加入方法<pre class="brush:php;toolbar:false">const glob = require('glob') // 遍历指定目录下的文件 exports.getEntries = (dirPath) =&gt; {   let filePaths = glob.sync(dirPath);   let entries = {};   filePaths.forEach(filePath =&gt; {     let filename = filePath.match(/(\w+)\.[html|js]+/)[1];     entries[filename] = filePath;   })   return entries; }</pre>修改設定

build/webpack.base.conf. js

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

build/webpack.base.prod.conf.js

#刪除原有的

HtmlWebpackPlugin

相關配置，在檔案結束前遍歷新增相關配置即可。 <pre class="brush:php;toolbar:false">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)); }</pre>config/index.js

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

assetsPublicPath: '../',

建置並預覽

$ npm run build

建置完成後，直接使用瀏覽器開啟

dist

目錄下的 html 檔案即可預覽效果。 總結

簡單總結以下，使用

vue-cli

開發多頁面應用程式的幾個關鍵點。

多重入口
多個
• HtmlWebpackPlugin

靜態資源的路徑
此文中介紹的配置，不一定適用於所有的開發場景。優化更多進一步的細節，還是要在實際開發中持續實踐。

相關推薦：

vue建立多頁面應用程式實例程式碼分享

Vue-cli建立單頁到多頁面的方法實例程式碼

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

以上是vue-cli開發多頁面應用的簡單範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！