創(chuàng)建文件一般我們的Vue項(xiàng)目都是單頁(yè)面的，因?yàn)閂ue在工程化開(kāi)發(fā)中依賴了Webpack，Webpack幫助我們將所有資源整合到一個(gè)單頁(yè)面中。但是，當(dāng)我們需要實(shí)現(xiàn)多頁(yè)面開(kāi)發(fā)時(shí)，我們需要對(duì)Webpack進(jìn)

創(chuàng)建文件

一般我們的Vue項(xiàng)目都是單頁(yè)面的，因?yàn)閂ue在工程化開(kāi)發(fā)中依賴了Webpack，Webpack幫助我們將所有資源整合到一個(gè)單頁(yè)面中。但是，當(dāng)我們需要實(shí)現(xiàn)多頁(yè)面開(kāi)發(fā)時(shí)，我們需要對(duì)Webpack進(jìn)行修改。首先，我們需要?jiǎng)?chuàng)建以下三個(gè)文件：

-

- src/pages/one/one.js

-

修改Webpack配置

接下來(lái)，我們需要對(duì)Webpack的配置進(jìn)行修改。

1. 打開(kāi)文件，在module.exports中找到entry，并添加多個(gè)入口文件one.js，如下所示：

entry: {

one: './src/pages/one/one.js',

}

2. 對(duì)開(kāi)發(fā)環(huán)境進(jìn)行修改，打開(kāi)文件，找到plugins，并添加如下配置：

new HtmlWebpackPlugin({

filename: '',

template: '',

inject: true,

chunks: ['one']

})

3. 對(duì)編譯環(huán)境進(jìn)行配置，打開(kāi)config/index.js文件，在build對(duì)象里加入以下配置：

one: (__dirname, '')

4. 配置生產(chǎn)環(huán)境，打開(kāi)文件，找到plugins，并添加如下配置：

new HtmlWebpackPlugin({

filename: ,

template: '',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortMode: 'dependency',

chunks: ['manifest', 'vendor', 'one']

})

編寫(xiě)頁(yè)面文件

接下來(lái)，我們需要編寫(xiě)Vue頁(yè)面文件。

1. 在one.js文件中，可以這樣寫(xiě)：

import Vue from 'vue'

import one from ''

false

new Vue({

el: '#one',

render: h > h(one)

})

2. 在文件中，可以這樣寫(xiě)：

3. 在文件中，可以將頁(yè)面連接到主頁(yè)面上：

查看效果

最后，我們可以查看效果，如果配置成功，我們就可以訪問(wèn)多個(gè)頁(yè)面了。