做后臺管理項目時，根據vue，element官網教程可搭建一個簡易的項目結構，但是這個搭建的項目結構默認是單頁應用的配置，如果我想脫離這個container布局容器，實現login頁面無外層容器、頂欄菜單、側邊欄菜單，則需另外配置多頁面入口配置。具體實現如下：

• 一、項目目錄更改

1、重命名并放入common文件夾下App.vue =>common/ index.vue Main.js => common/index.js復制代碼

2、增加login.js,login.vue ，在全局目錄下增加login.html

• 二、改配置
  

1、webpack.base.conf.js

entry: {index: './src/common/index.js',login: './src/common/login.js', },復制代碼

2. webpack.dev.conf.js

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,chunks: ['index'] }), new HtmlWebpackPlugin({filename: 'login.html',template: 'login.html',inject: true,chunks: ['login'] }),復制代碼

3.webpack.prod.conf.js

plugins:[new HtmlWebpackPlugin({filename: process.env.NODE_ENV === 'testing'? 'index.html': 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 CommonsChunkPluginchunksSortMode: 'dependency',chunks: ['manifest','vendor','index'] }), new HtmlWebpackPlugin({filename: config.build.login,template: 'login.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 CommonsChunkPluginchunksSortMode: 'dependency',chunks: ['manifest','vendor','login'] })],復制代碼

及

由app改為index

4.構建配置更改、

Build下加入login

build: { // Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),login: path.resolve(__dirname, '../dist/login.html'), }復制代碼

完成了！！

• 三、結果
  

頁面效果圖，現在做成多頁面入口后，login頁面不再被渲染到content中，則可以實現如下效果。

• 四、相應鏈接
  

login相關代碼鏈接

整個項目相關代碼鏈接

總結

以上是生活随笔為你收集整理的vue项目多页面入口配置的全部內容，希望文章能夠幫你解決所遇到的問題。

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