首頁 >web前端 >js教程 >vue-cli開發多頁面應用的簡單範例

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

小云云原創: 2018-02-28 14:28:002568瀏覽

建立專案

使用 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

擴充一個方法。 <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) => { let filePaths = glob.sync(dirPath); let entries = {}; filePaths.forEach(filePath => { 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