如何使用 vue-cli 開發多頁應用？本文主要介紹了詳解如何使用 vue-cli 開發多頁應用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考，希望能幫助到大家。

全局配置

修改 webpack.base.conf.js

打開 ~\build\webpack.base.conf.js ，找到entry，添加多入口entry: {

app: './src/main.js',

app2: './src/main2.js',

app3: './src/main3.js',

},

運行、編譯的時候每一個入口都會對應一個Chunk

run dev 開發環境

修改 webpack.dev.conf.js

打開 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加對應的多頁，并為每個頁面添加Chunk配置

chunks: ['app']中的app對應的是webpack.base.conf.js中entry設置的入口文件plugins:[

// https://github.com/ampedandwired/html-webpack-plugin

// 多頁:index.html → app.js

new HtmlWebpackPlugin({

filename: 'index.html',//生成的html

template: 'index.html',//來源html

inject: true,//是否開啟注入

chunks: ['app']//需要引入的Chunk，不配置就會引入所有頁面的資源

}),

// 多頁:index2.html → app2.js

new HtmlWebpackPlugin({

filename: 'index2.html',//生成的html

template: 'index2.html',//來源html

inject: true,//是否開啟注入

chunks: ['app2']//需要引入的Chunk，不配置就會引入所有頁面的資源

}),

// 多頁:index3.html → app3.js

new HtmlWebpackPlugin({

filename: 'index3.html',//生成的html

template: 'index3.html',//來源html

inject: true,//是否開啟注入

chunks: ['app3']//需要引入的Chunk，不配置就會引入所有頁面的資源

})

]

run build 編譯

修改 config/index.js

打開~\config\index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其后添加多頁build: {

index: path.resolve(__dirname, '../dist/index.html'),

index2: path.resolve(__dirname, '../dist/index2.html'),

index3: path.resolve(__dirname, '../dist/index3.html'),

},

修改 webpack.prod.conf.js

打開~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加對應的多頁，并為每個頁面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中對應的 buildplugins: [

// 多頁:index.html → app.js

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']//需要引入的Chunk，不配置就會引入所有頁面的資源

}),

// 多頁:index2.html → app2.js

new HtmlWebpackPlugin({

filename: config.build.index2,

template: 'index2.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortMode: 'dependency',

chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就會引入所有頁面的資源

}),

// 多頁:index3.html → app3.js

new HtmlWebpackPlugin({

filename: config.build.index3,

template: 'index3.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortMode: 'dependency',

chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就會引入所有頁面的資源

}),

]

如果頁面比較多，可以考慮使用循環將 HtmlWebpackPlugin 添加到 plugins// utils.js

exports.getEntry = function(globPath, pathDir) {

var files = glob.sync(globPath);

var entries = {},

entry, dirname, basename, pathname, extname;

for (var i = 0; i < files.length; i++) {

entry = files[i];

dirname = path.dirname(entry);

extname = path.extname(entry);

basename = path.basename(entry, extname);

pathname = path.join(dirname, basename);

pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;

entries[pathname] = ['./' + entry];

}

return entries;

}// webpack.base.conf.js

var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));

pages.forEach(function (pathname) {

// https://github.com/ampedandwired/html-webpack-plugin

var conf = {

filename: '../views/' + pathname + '.html', //生成的html存放路徑，相對于path

template: '../src/views/' + pathname + '.html', //html模板路徑

inject: false, //js插入的位置，true/'head'/'body'/false

/*

* 壓縮這塊，調用了html-minify，會導致壓縮時候的很多html語法檢查問題，

* 如在html標簽屬性上使用{{...}}表達式，所以很多情況下并不需要在此配置壓縮項，

* 另外，UglifyJsPlugin會在壓縮代碼的時候連同html一起壓縮。

* 為避免壓縮html，需要在html-loader上配置'html?-minimize'，見loaders中html-loader的配置。

*/

// minify: { //壓縮HTML文件

// removeComments: true, //移除HTML中的注釋

// collapseWhitespace: false //刪除空白符與換行符

// }

};

if (pathname in config.entry) {

conf.favicon = 'src/images/favicon.ico';

conf.inject = 'body';

conf.chunks = ['vendors', pathname];

conf.hash = true;

}

config.plugins.push(new HtmlWebpackPlugin(conf));

});

同樣入口 entry 也可以使用// webpack.base.conf.js

entry: {

app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')

},

相關推薦：

總結

以上是生活随笔為你收集整理的vue.js 多页 php,如何使用 vue-cli 开发多页应用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。