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

創(chuàng)建文件

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

-

- src/pages/one/one.js

-

修改Webpack配置

接下來，我們需要對Webpack的配置進行修改。

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

entry: {

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

}

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

new HtmlWebpackPlugin({

filename: '',

template: '',

inject: true,

chunks: ['one']

})

3. 對編譯環(huá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. 在文件中，可以將頁面連接到主頁面上：

查看效果

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