站長資訊網(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號
        主站蜘蛛池模板: 国产在线精品一区二区夜色| 日韩一区精品视频一区二区| 2021年精品国产福利在线| 国产精品欧美久久久天天影视| 亚欧洲精品在线视频免费观看| 99久久国产综合精品麻豆| 欧美精品高清在线xxxx| 四虎影视884a精品国产四虎| 无码人妻精品一区二区三区东京热| 国产精品网址在线观看你懂的| 2020久久精品国产免费| 亚洲国产成人精品无码区在线观看| 99久久免费国产精品| 51午夜精品免费视频| 无码人妻精品一区二区三区久久久| 久久久久久一区国产精品| 69堂午夜精品视频在线| 国产成人精品日本亚洲直接| 一级做a爰黑人又硬又粗免费看51社区国产精品视 | 亚洲av永久无码精品古装片| 国产乱子伦精品免费视频| 欧美亚洲精品在线| 国产成人精品视频播放| 国产在线精品无码二区| 日韩精品无码一区二区中文字幕| 合区精品久久久中文字幕一区| 久久精品成人免费国产片小草| 国产精品美女一区二区视频 | 欧美精品VIDEOSSEX少妇| 在线观看国产精品普通话对白精品| 精品视频久久久久| 国产精品分类视频分类一区| 久久久久无码精品国产| 91亚洲国产成人久久精品| 四虎国产精品永久在线观看| 国产精品99久久免费观看| 亚洲国产精品无码久久一区二区| 91精品国产91久久综合| 精品日韩亚洲AV无码一区二区三区| 国产99久久精品一区二区| 精品久久人人爽天天玩人人妻|