站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        vue適用多頁面應用嗎

        vue適用多頁面應用。vue在工程化開發(fā)的時候依賴于webpack,而webpack是將所有的資源整合到一塊后形成一個html文件 一堆js文件;如果想使用vue實現(xiàn)多頁面應用,就需要對它的依賴進行重新配置,即通過修改webpack配置來讓腳手架具備構建多頁應用的能力。

        vue適用多頁面應用嗎

        本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。

        我們知道vue可以快速開發(fā)web單頁應用,而且官方為我們提供了自己的應用腳手架vue-cli,我們只需要下載腳手架,安裝依賴后就可以啟動vue應用雛形。

        這得益與webpack的依賴追蹤,各種資源后綴的loader,以及相關webpack插件的強大功能。

        然而有些時候,我們有多頁面的開發(fā)需求,在這種情況下,我們可以為多頁面構建相應的多個應用,比如通過vue-cli生成多個應用目錄,但是這樣一方面會多出很多重復的構建代碼和樣板代碼,另外也會破壞應用的統(tǒng)一性,不便于維護。我們可以在vue-cli的基礎上通過修改webpack配置來讓腳手架具備構建多頁應用的能力。

        vue在工程化開發(fā)的時候依賴于 webpack ,而webpack是將所有的資源整合到一塊后形成一個html文件 一堆 js文件, 如果將vue實現(xiàn)多頁面應用,就需要對他的依賴進行重新配置,也就是修改webpack的配置文件.

        下面主要詳述Vue的多頁面應用開發(fā)(MPA)

        具體實現(xiàn)步驟

        1.1、需要修改的配置文件

        1、進入buildwebpack.base.conf.js目錄下,在module.exports的域里,找到entry,在那里配置添加多個入口:

        vue適用多頁面應用嗎

        注意綠色框的修改和對應。

          entry: {     app: './src/main.js',     one: './src/pages/one.js',     two: './src/pages/two.js'   }
        登錄后復制

        2、對開發(fā)環(huán)境run dev里進行修改,打開buildwebpack.dev.conf.js文件,在module.exports那里找到plugins,下面寫法如下:

        vue適用多頁面應用嗎

            new HtmlWebpackPlugin({       filename: 'index.html',       template: 'index.html',       inject: true,       chunks: ['app']     }),     new HtmlWebpackPlugin({       filename: 'one.html',       template: 'one.html',       inject: true,       chunks: ['one']     }),     new HtmlWebpackPlugin({       filename: 'two.html',       template: 'two.html',       inject: true,       chunks: ['two']     }),
        登錄后復制

        說明:這里的配置比較重要 ,如果沒寫好的 在打包的時候就會報錯了, 在chunks那里的app指的是webpack.base.conf.js的 entry 那里與之對應的變量名。chunks的作用是每次編譯、運行時每一個入口都會對應一個entry,如果沒寫則引入所有頁面的資源。也就是沒有改項目配置前形成的單頁應用。

        3、之后就對run build也就是編譯環(huán)境進行配置。首先打開configindex.js文件,在build里加入這個

        vue適用多頁面應用嗎

            index: path.resolve(__dirname, '../dist/index.html'),     one: path.resolve(__dirname, '../dist/one.html'),     two: path.resolve(__dirname, '../dist/two.html'),
        登錄后復制

        說明:這里也就是打包之后dist文件夾中形成的 html。

        4、然后打開/build/webpack.prod.conf.js文件,在plugins那里找到HTMLWebpackPlugin,添加

        vue適用多頁面應用嗎

         new HtmlWebpackPlugin({       filename: config.build.index,       template: 'index.html',       inject: true,       minify: {         removeComments: true,         collapseWhitespace: true,         removeAttributeQuotes: true       },       chunksSortMode: 'dependency',       chunks: ['manifest', 'vendor', 'app']     }),     new HtmlWebpackPlugin({       filename: config.build.one,       template: 'one.html',       inject: true,       minify: {         removeComments: true,         collapseWhitespace: true,         removeAttributeQuotes: true       },       chunksSortMode: 'dependency',       chunks: ['manifest', 'vendor', 'one']     }),     new HtmlWebpackPlugin({       filename: config.build.two,       template: 'two.html',       inject: true,       minify: {         removeComments: true,         collapseWhitespace: true,         removeAttributeQuotes: true       },       chunksSortMode: 'dependency',       chunks: ['manifest', 'vendor', 'two']     }),
        登錄后復制

        說明:其中filename引用的是configindex.js里的build,每個頁面都要配置一個chunks,不然會加載所有頁面的資源。

        1.2、我的目錄

        vue適用多頁面應用嗎

        2.3、需要新建的幾個文件的代碼

        1、one.js文件代碼:(我這里是舉例),two.js和這個代碼類似,注意將“one”替換成“two”即可。

        import Vue from 'vue' import one from './one.vue' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({     el: '#one',     render: h => h(one) })
        登錄后復制

        2、one.vue文件代碼:(我這里是舉例),two.vue和這個代碼類似,注意將“one”替換成“two”即可。

        <template>     <div id="one">         <p>{{msg}}</p>     </div> </template>  <script>     export default {         name: 'one',         data() {             return {                 msg: 'I am one'             }         }     } </script>
        登錄后復制

        3、one.html文件代碼:(我這里是舉例),two.vue和這個代碼類似,注意將“one”替換成“two”即可。

        <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width,initial-scale=1.0">     <title>one-page</title> </head> <body>     <div id="one"></div> </body> </html>
        登錄后復制

        注意!<div id="one"></div>中id的修改,之前忘記修改,頁面空白無內(nèi)容,打開控制臺可以看到div標簽中并無內(nèi)容,且id是app我才反應過來,修改后就好了。

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 97视频在线观看这里只有精品| 色偷偷888欧美精品久久久| 国产国拍亚洲精品mv在线观看| 国产一区二区精品久久凹凸| 精品久久久久久亚洲精品| 欧美精品在线视频| 国产成人精品久久亚洲高清不卡| 99久久国产热无码精品免费 | 91探花国产综合在线精品| 久久久久久久久无码精品亚洲日韩| 牛牛在线精品观看免费正| 久久成人国产精品二三区| 久久久久人妻一区精品色| 中文字幕精品久久| 天天爽夜夜爽夜夜爽精品视频| 国产免费久久精品99久久| 成人午夜精品亚洲日韩| 久久线看观看精品香蕉国产| 97久久综合精品久久久综合| 国产精品VA在线观看无码不卡 | 欧美精品hdvideosex4k| 永久无码精品三区在线4| 久久久精品久久久久久 | 97精品伊人久久久大香线蕉| 精品久久久久久久| 999精品视频| 国产精品成人va| 国产精品亚洲日韩欧美色窝窝色欲 | 人妻精品久久无码专区精东影业| 亚洲无码精品浪潮| 无码欧精品亚洲日韩一区夜夜嗨| 久久精品二区| 久久综合精品国产一区二区三区| 国产一区二区三区在线观看精品 | 蜜臀AV无码国产精品色午夜麻豆 | 亚洲国产人成精品| 最新精品亚洲成a人在线观看| 亚洲无码精品浪潮| 日韩人妻精品一区二区三区视频 | 中文字幕精品亚洲无线码二区| 在线亚洲精品自拍|