vue中實(shí)現(xiàn)多頁(yè)面應(yīng)用方式

更新時(shí)間：2024年08月07日 10:44:28 作者：晚星@

這篇文章主要介紹了vue中實(shí)現(xiàn)多頁(yè)面應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue實(shí)現(xiàn)多頁(yè)面應(yīng)用

眾所都知vue是一個(gè)單頁(yè)面應(yīng)用，但是單頁(yè)面應(yīng)用最大的問(wèn)題，就是首次加載的時(shí)候過(guò)慢，因?yàn)樗阉械腸ss，js都要下載下來(lái)后，才可以加載頁(yè)面，尤其是移動(dòng)端，在弱網(wǎng)的情況下，體驗(yàn)感極差

嘗試過(guò)很多種優(yōu)化的方式，就算在優(yōu)化css,js的體積，但是還是在100-200K的這么個(gè)容量，所以我想起能否用多頁(yè)面應(yīng)用去解決這個(gè)問(wèn)題。

首先你的會(huì)一些webpack

第一步

進(jìn)入\build\webpack.base.conf.js目錄下，在module.exports的域里，找到entry

在那里配置添加多個(gè)入口：

// 文件路徑更具自己的實(shí)際情況進(jìn)行配置,我這僅是 demo
entry: {
    app: './src/main.js',
    one: './src/js/one.js',
    two: './src/js/two.js'
  },

這里的 one two 一定時(shí)要先在這里定義好的,后面是要用到的,好比里面的app 不是隨便瞎寫(xiě)的

第二步

對(duì)開(kāi)發(fā)環(huán)境run dev里進(jìn)行修改，打開(kāi)\build\webpack.dev.conf.js文件，在module.exports那里找到plugins

下面寫(xiě)法如下：

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']
    }),

這里的配置比較重要 ,如果沒(méi)寫(xiě)好的在打包的時(shí)候就會(huì)報(bào)錯(cuò)了, 在chunks那里的app指的是webpack.base.conf.js的 entry 那里與之對(duì)應(yīng)的變量名。

chunks的作用是每次編譯、運(yùn)行時(shí)每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)entry，如果沒(méi)寫(xiě)則引入所有頁(yè)面的資源。也就是沒(méi)有改項(xiàng)目配置前形成的單頁(yè)應(yīng)用

第三步

對(duì)run build也就是編譯環(huán)境進(jìn)行配置。首先打開(kāi)\config\index.js文件，在build里加入這個(gè)：

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

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

第四步

打開(kāi)/build/webpack.prod.conf.js文件，在 plugins 那里找到 HTMLWebpackPlugin，然后添加如下代碼：

其實(shí)復(fù)制粘貼改吧改吧就能用

new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            
        },
        chunksSortMode: 'dependency',
        //(在這里和你上面chunks里面的名稱(chēng)對(duì)應(yīng))
        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']
    }),

其中filename引用的是\config\index.js里的build，每個(gè)頁(yè)面都要配置一個(gè)chunks，不然會(huì)加載所有頁(yè)面的資源。

上面的操作完成之后進(jìn)行下面的傻瓜式操作對(duì)咱們創(chuàng)建的文件進(jìn)行碼代碼

one.js文件可以這樣寫(xiě)：

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)
})

one.vue寫(xiě)法如下：

<template>
  <div id="one">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'one',
  data () {
    return {
      msg: 'I am one'
    }
  }
}
</script>

tow 文件中的代碼一樣我就不寫(xiě)了

主要步驟我寫(xiě)完了,咱們?cè)囋嚧虬募?輸入 npm run build 打包文件