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

創(chuàng)建文件

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

-

- src/pages/one/one.js

-

修改Webpack配置

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

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

entry: {

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

}

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

new HtmlWebpackPlugin({

filename: '',

template: '',

inject: true,

chunks: ['one']

})

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

one: (__dirname, '')

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

new HtmlWebpackPlugin({

filename: ,

template: '',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortMode: 'dependency',

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

})

編寫頁面文件

接下來，我們需要編寫Vue頁面文件。

1. 在one.js文件中，可以這樣寫：

import Vue from 'vue'

import one from ''

false

new Vue({

el: '#one',

render: h > h(one)

})

2. 在文件中，可以這樣寫：

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

查看效果

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