国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue+webpack多頁面應用

PascalXie / 2382人閱讀

摘要：多頁面應用就是幾個單頁面應用在一起。這篇文章使用的是總共有步我們從安裝好一個單頁面應用說起。在多頁面應用中，因為有多個應用模板，所以建議把應用模板放在一個文件夾里。例如創(chuàng)建每個單頁面應用的入口文件。如能用單頁面應用的，不使用多頁面應用。

vue+webpack多頁面應用

從git上初始化的vue項目框架是單頁面的。單頁面應用可以實現(xiàn)大部分頁面web應用開發(fā)。若要用到多頁面需要需要配置。這篇文章就說說怎么應用多頁面應用。
多頁面應用就是幾個單頁面應用在一起。
這篇文章使用的是vue2.+,webpack3.+
總共有5步
我們從安裝好一個單頁面應用說起。

1、 創(chuàng)建一個vue項目。 2、 創(chuàng)建模板html文件，入口文件，vue文件。

一般在根據(jù)目錄下面有一個index.html文件。它是頁面的html模板文件。一個模板文件就是一個單頁面應用，按需創(chuàng)建模板。
在多頁面應用中，因為有多個應用模板，所以建議把應用模板html放在一個文件夾里。不放也沒關系。例如：

創(chuàng)建每個單頁面應用的入口文件。（*.js）

每一個單頁面的三個文件（.js, .vue, *.html）都得對應上。

3、 定義入口文件。

因為webpack有2個環(huán)境（1.開發(fā)環(huán)境。2.生產環(huán)境。）所以這2個環(huán)境都需要配置。這步是作用于開發(fā)環(huán)境的。

打開webpack.base.conf.js文件。在入口選項中輸入入口文件的路徑及變量名。如：

4、 配置開發(fā)環(huán)境。

打開webpack.dev.conf.js文件。在plugins選項中設置各單頁面應用的htmlwebpackplugin配置。記得修改首頁的配置。如：

5、 配置生產環(huán)境。

在index.js文件中的build選項中設置模板路徑。如：

在webpack.prod.conf.js文件。在plugins選項中設置各單頁面應用的htmlwebpackplugin配置。在首頁的配置中添加了chunksSortMode,chunks選項。添加各頁面的htmlwebpackplugin插件配置。如：

tip

能用單頁面應用的，不使用多頁面應用。基本上單頁面都能解決問題。頁面跳轉可以使用this.$router.push(....)搞定。

2018/05/22 by stone

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95184.html

相關文章

  • Vue+thinkJs博客網(wǎng)站（一）之vue多頁面應用的webpack3配置

    摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因為是多頁面應用，需要多個入口文件來保證打包成不同的。 一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構建個人博客網(wǎng)站，頁面分為博客展示和后臺管理，主要目的是學習使用thinkJs。現(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項目目錄結構如下...

    NickZhou 評論0 收藏0

  • Vue+thinkJs博客網(wǎng)站（一）之vue多頁面應用的webpack3配置

    摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因為是多頁面應用，需要多個入口文件來保證打包成不同的。 一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構建個人博客網(wǎng)站，頁面分為博客展示和后臺管理，主要目的是學習使用thinkJs。現(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項目目錄結構如下...

    dongxiawu 評論0 收藏0

  • @vue/cli+webpack搭建多頁面應用

    摘要：本文記錄了用搭建項目后，配置成多頁面應用的過程。項目地址首先全局安裝創(chuàng)建初始項目創(chuàng)建后默認是一個單頁面應用，在默認結構的基礎上將目錄結構改為如下形式。其中目錄下的和就是多頁面應用中的兩個頁面。 vue-multi-pages 本文記錄了用@vue/cli+webpack搭建項目后，配置成多頁面應用的過程。 項目地址：https://github.com/mandyshen9... 首先...

    ThinkSNS 評論0 收藏0

  • vue+webpack搭建單文件應用和多文件應用webpack.config.js的寫法區(qū)別

    摘要：而多頁面應用的入口文件是所有需要用到的頁面。單文件應用和多文件應用上，是大同小異的，區(qū)別就討論到這里了。 1.前言 這幾天，都遇到過有人問過相似的問題，就是用vue和webpack搭建目錄的時候，怎么把單頁面應用的配置改成多文件應用，或者是怎么把多文件應用的配置改成單文件應用。這個情況，我之前有處理過，公司的同事教過我，我就針對這個情況寫下此篇文章。各位如果覺得我哪里寫得不夠好，寫錯了...

    seal_de 評論0 收藏0

  • 搭建一個多頁面的無依賴的工程化項目

    摘要：也就是說，我們需要做一個非單頁應用的工程化項目。現(xiàn)在這個項目的靜態(tài)資源是以文件哈希值來控制的。這個該怎么解決呢感謝，我們可以通過如下的配置來實現(xiàn)意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。 最近金拱門比較火，我們先戳開它的官網(wǎng)看看。 看完后，如果你老板要是讓你做這么一個網(wǎng)站，一定要seo，一定要兼容IE，你會怎么去做呢？ 用vue/react吧，單頁應用滿足不了se...

    go4it 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<