vue+webpack多頁面應用

vue+webpack多頁面應用

從git上初始化的vue項目框架是單頁面的。單頁面應用能夠實現大部分頁面web應用開發。若要用到多頁面須要須要配置。這篇文章就說說怎麼應用多頁面應用。
多頁面應用就是幾個單頁面應用在一塊兒。
這篇文章使用的是vue2.+,webpack3.+
總共有5步
咱們從安裝好一個單頁面應用提及。

一、 建立一個vue項目。

二、 建立模板html文件，入口文件，vue文件。

通常在根據目錄下面有一個index.html文件。它是頁面的html模板文件。一個模板文件就是一個單頁面應用，按需建立模板。
在多頁面應用中，由於有多個應用模板，因此建議把應用模板html放在一個文件夾裏。不放也不要緊。例如：

建立每一個單頁面應用的入口文件。（*.js）

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

三、 定義入口文件。

由於webpack有2個環境（1.開發環境。2.生產環境。）因此這2個環境都須要配置。這步是做用於開發環境的。

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

四、 配置開發環境。

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

五、 配置生產環境。

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

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

tip

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

---

2018/05/22 by stone