溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

基于webpack2.x的vue2.x的多頁(yè)面站點(diǎn)

發(fā)布時(shí)間：2020-08-02 21:08:47 來(lái)源：網(wǎng)絡(luò) 閱讀：417 作者：jjjyyy66 欄目：網(wǎng)絡(luò)安全

    

vue的多頁(yè)面

依舊使用vue-cli來(lái)初始化我們的項(xiàng)目

然后修改主要目錄結(jié)構(gòu)如下：

├── build│   ├── build.js│   ├── check-versions.js│   ├── dev-client.js│   ├── dev-server.js│   ├── utils.js│   ├── vue-loader.conf.js│   ├── webpack.base.conf.js│   ├── webpack.dev.conf.js│   └── webpack.prod.conf.js├── src│   ├── pages│   │   ├── boys│   │   │   ├── index.html│   │   │   ├── index.js│   │   │   └── index.vue│   │   ├── goods│   │   │   ├── index.html│   │   │   ├── index.js│   │   │   └── index.vue│   │   ├── index│   │   │   ├── index.html│   │   │   ├── index.js│   │   │   └── index.vue│   │   └── sotho│   │       ├── index.html│   │       ├── index.js│   │       └── index.vue

編寫(xiě)每個(gè)頁(yè)面

可以看到這里我們有4個(gè)單獨(dú)的頁(yè)面，分別是boys,goods,index,sotho

首先看boys文件夾中的代碼:

index.html

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title>vue3</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body></html>

這個(gè)是我們要單獨(dú)生成的頁(yè)面,最后也是生成index.html

index.vue

<style scoped>
  .boys {    background-color: red;
  }</style><template>

  <div id="app" class="boys">
    boys got many things.  </div></template><script>export default {
  name: 'boys'}</script>

這是我們的vue文件，可以看成一個(gè)組件，其實(shí).vue文件你可以看成一個(gè)語(yǔ)法糖，最終會(huì)被vue-loader編譯成js,生成對(duì)應(yīng)的css,js,dom

index.js

import Vue from 'vue'import Index from './index.vue'Vue.config.productionTip = falsenew Vue({
  el: '#app',
  template: '<Index/>',
  components: { Index }
})

這就是主要文件了，這里執(zhí)行vue的實(shí)例化，用法同在瀏覽器端頁(yè)面中直接引入vue.js文件一樣的含義

其他幾個(gè)頁(yè)面一樣也是同理,具體可以見(jiàn):https://git.oschina.net/zqzjszqzjs/vue2-x-multiple

修改webpack.config.js

由于vue中的配置使用了模塊化管理，所以我們需要修改下面兩個(gè)文件：

  • webpack.base.conf.js

我們需要修改webpack.base.conf.js的入口entry，這是配置多入口文件的重點(diǎn)！
如果不懂多入口含義的化，建議去看下webpack的文檔。

webpack.base.conf.js

...module.exports = {
  entry: {    'pages/boys/index': './src/pages/boys/index.js', //配置boys頁(yè)面入口
    'pages/goods/index': './src/pages/goods/index.js', //配置goods頁(yè)面入口
    'pages/index/index': './src/pages/index/index.js', //配置index頁(yè)面入口
    'pages/sotho/index': './src/pages/sotho/index.js', //配置sotho頁(yè)面入口
  },
...

  • webpack.dev.conf.js

這里我們需要修改plugins，它是個(gè)強(qiáng)大的即插即用的拓展。

我們使用html-webpack-plugin來(lái)生成我們的對(duì)于的頁(yè)面。

...var HtmlWebpackPlugin = require('html-webpack-plugin')
...

...module.exports = merge(baseWebpackConfig, {
  ...
  plugins: [    new webpack.DefinePlugin({      'process.env': config.dev.env
    }),     new HtmlWebpackPlugin({
      filename:'./pages/boys/index.html', //指定生成的html存放路徑
      template:'./src/pages/boys/index.html', //指定html模板路徑
      inject: true, //是否將js等注入頁(yè)面,以及指定注入的位置'head'或'body'
      chunks:['pages/boys/index'] //需要引入的chunk(模塊資源)，不配置就會(huì)引入所有頁(yè)面的資源(js/css),這是個(gè)很重要的屬性，你可以不配置試試效果
    }),    new HtmlWebpackPlugin({
      filename:'./pages/goods/index.html',
      template:'./src/pages/goods/index.html',
      inject: true,
      chunks:['pages/goods/index']
    }),    new HtmlWebpackPlugin({
      filename:'./pages/index/index.html', 
      template:'./src/pages/index/index.html',
      inject: true,
      chunks:['pages/index/index']
    }),    new HtmlWebpackPlugin({
      filename:'./pages/sotho/index.html',
      template:'./src/pages/sotho/index.html',
      inject: true,
      chunks:['pages/sotho/index']
    }),
   ...
  ]
})

以上就是我們進(jìn)行多頁(yè)開(kāi)發(fā)的主要配置項(xiàng)。

開(kāi)發(fā)環(huán)境訪問(wèn)頁(yè)面

運(yùn)行npm run dev,我們看下怎么訪問(wèn)我們的多頁(yè)vue應(yīng)用。

  • http://localhost:9090/pages/index/index.html 訪問(wèn)index頁(yè)面

  • http://localhost:9090/pages/boys/index.html 訪問(wèn)boys頁(yè)面

  • http://localhost:9090/pages/goods/index.html 訪問(wèn)goods頁(yè)面

  • http://localhost:9090/pages/sotho/index.html 訪問(wèn)sotho頁(yè)面

再來(lái)看下我們的dom結(jié)構(gòu)是什么樣：
基于webpack2.x的vue2.x的多頁(yè)面站點(diǎn)

頁(yè)面里的js就是我們通過(guò)插件注入的，并且我們是通過(guò)指定chunks完成。

build

運(yùn)行npm run build

  vue2-x-multiple git:(master)  npm run build

> vue3@1.0.0 build /study/vue2-x-multiple
> node build/build.js

 building for production...
Starting to optimize CSS...
Processing static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css...
Processing static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css...
Processing static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css...
Processing static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css...
Processed static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css, before: 114, after: 44, ratio: 38.6%
Processed static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css, before: 116, after: 46, ratio: 39.66%
Processed static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css, before: 92, after: 22, ratio: 23.91%
Processed static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css, before: 92, after: 22, ratio: 23.91%Hash: 2467c91090ccf4690865Version: webpack 2.5.1Time: 6319ms
                                                                Asset       Size  Chunks             Chunk Namesstatic/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css.map  312 bytes       1  [emitted]  pages/sotho/index                             static/js/vendor.d7548891d04d4f883b29.js    83.2 kB       0  [emitted]  vendor                  static/js/pages/index/index.b2ce74f4155fb942a064.js  671 bytes       2  [emitted]  pages/index/index                  static/js/pages/goods/index.7d0dda2791db2d3b1500.js  702 bytes       3  [emitted]  pages/goods/index                   static/js/pages/boys/index.2c268b75ba9424211d79.js  699 bytes       4  [emitted]  pages/boys/index                           static/js/manifest.f466ccb58b3271558be5.js    1.57 kB       5  [emitted]  manifest     static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css   44 bytes       4  [emitted]  pages/boys/index    static/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css   46 bytes       3  [emitted]  pages/goods/index    static/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css   22 bytes       2  [emitted]  pages/index/index    static/css/pages/sotho/index.7415ffd3ef7b9d1a4398cba49927b12b.css   22 bytes       1  [emitted]  pages/sotho/index                         static/js/vendor.d7548891d04d4f883b29.js.map     687 kB       0  [emitted]  vendor              static/js/pages/sotho/index.e706490d7c42ad8e4f73.js.map    5.55 kB       1  [emitted]  pages/sotho/index                  static/js/pages/sotho/index.e706490d7c42ad8e4f73.js  674 bytes       1  [emitted]  pages/sotho/index              static/js/pages/index/index.b2ce74f4155fb942a064.js.map    5.55 kB       2  [emitted]  pages/index/indexstatic/css/pages/index/index.f6340f14071a89cf2b092da280ffaf8c.css.map  312 bytes       2  [emitted]  pages/index/index              static/js/pages/goods/index.7d0dda2791db2d3b1500.js.map    5.64 kB       3  [emitted]  pages/goods/indexstatic/css/pages/goods/index.fe8f1bc39f33dce4c4d610c2326482c6.css.map  338 bytes       3  [emitted]  pages/goods/index               static/js/pages/boys/index.2c268b75ba9424211d79.js.map    5.62 kB       4  [emitted]  pages/boys/index static/css/pages/boys/index.19ebbc80a1c187989dbf02d03192e84e.css.map  333 bytes       4  [emitted]  pages/boys/index                       static/js/manifest.f466ccb58b3271558be5.js.map    14.6 kB       5  [emitted]  manifest
                                              ./pages/boys/index.html  386 bytes          [emitted]
                                             ./pages/goods/index.html  389 bytes          [emitted]
                                             ./pages/index/index.html  389 bytes          [emitted]
                                             ./pages/sotho/index.html  389 bytes          [emitted]

  Build complete.
  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

進(jìn)入dist目錄，查看生成的頁(yè)面

├── pages│   ├── boys│   │   └── index.html│   ├── goods│   │   └── index.html│   ├── index│   │   └── index.html│   └── sotho│       └── index.html└── static
    ├── css
    │   └── pages
    │       ├── boys
    │       │   ├── index.19ebbc80a1c187989dbf02d03192e84e.css
    │       │   └── index.19ebbc80a1c187989dbf02d03192e84e.css.map
    │       ├── goods
    │       │   ├── index.fe8f1bc39f33dce4c4d610c2326482c6.css
    │       │   └── index.fe8f1bc39f33dce4c4d610c2326482c6.css.map
    │       ├── index
    │       │   ├── index.f6340f14071a89cf2b092da280ffaf8c.css
    │       │   └── index.f6340f14071a89cf2b092da280ffaf8c.css.map
    │       └── sotho
    │           ├── index.7415ffd3ef7b9d1a4398cba49927b12b.css
    │           └── index.7415ffd3ef7b9d1a4398cba49927b12b.css.map
    └── js
        ├── manifest.f466ccb58b3271558be5.js
        ├── manifest.f466ccb58b3271558be5.js.map
        ├── pages
        │   ├── boys
        │   │   ├── index.2c268b75ba9424211d79.js
        │   │   └── index.2c268b75ba9424211d79.js.map
        │   ├── goods
        │   │   ├── index.7d0dda2791db2d3b1500.js
        │   │   └── index.7d0dda2791db2d3b1500.js.map
        │   ├── index
        │   │   ├── index.b2ce74f4155fb942a064.js
        │   │   └── index.b2ce74f4155fb942a064.js.map
        │   └── sotho
        │       ├── index.e706490d7c42ad8e4f73.js
        │       └── index.e706490d7c42ad8e4f73.js.map
        ├── vendor.d7548891d04d4f883b29.js
        └── vendor.d7548891d04d4f883b29.js.map

到此為止，一個(gè)簡(jiǎn)單的基于vue2.x的多頁(yè)應(yīng)用完成了。


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手