使用vue-cli搭建多頁應用

使用vue-cli 3.9搭建多頁應用

在vue-cli 3.0之後，官方已經支持通過簡單的配置來創建多頁應用了，單默認創建的應用還是單頁應用，接下來就介紹下我創建多頁應用的流程；

第一步，創建項目

官方vue-cli創建項目的教程

• 選擇一個合適的目錄，打開命令行窗口，運行 vue ui

這裏假設你已經安裝了 node.js以及vue-cli環境了，若沒有安裝的話可以先百度一下

彈出網頁界面之後，默認是在項目這個標籤下的，顯示的是當前目錄下所有的vue項目，點擊創建進入項目創建界面

• 接下來的步驟全部使用默認即可，
  
  

• 具體圖形界面的功能可以到處點一點，看一看，這裏就不多進行介紹了

• 目錄結構大概是這樣子的：

  |   .gitignore
  |   babel.config.js
  |   package-lock.json
  |   package.json
  |   README.md
  |   
  +---node_modules...
  +---public
  |       favicon.ico
  |       index.html
  |
  \---src
      |   App.vue
      |   main.js
      |
      +---assets
      |       logo.png
      |
      \---components
              HelloWorld.vue
  

  • 把 src目錄整理一下，便於多頁面代碼組織：

+---assets
|       favicon.ico
|       logo.png
|
+---components
\---pages
    +---index
    |       App.vue
    |       HelloWorld.vue
    |       index.html
    |       main.js
    |
    \---second
            HelloWorld.vue
            second.html
            second.js
            Test.vue

• 這裏面的second目錄就是我新創建的頁面的代碼文件了

第二步，配置vue.config.js

vue.config.js配置參考官方文檔

以下的多頁配置參考的是 官方的配置文檔的 pages部分

• vue-cli默認是沒有創建vue.config.js的，我們在 package.json同級目錄，也就是項目的根目錄下創建 vue.config.js文件

const pages ='./src/pages';
module.exports = {
    pages: {
          index: {    //這是默認頁
                  // page對應的js的入口        
                  entry: pages+'/index/main.js',
                   // 模板來源，也就是當前頁使用哪個html文檔作爲模版，默認使用 public/index.html        
                   template: pages+'/index/index.html',        
                   // 在 dist/index.html 的輸出, 使用npm run build編譯輸出的路徑（相對於 /dist而言）
                   // 若想生成目錄，只需要改爲 ‘dirname/index.html即可’
                    filename: 'index.html',
           },
           secondpage:      //新創建的第二頁，在開發環境下，這裏的‘secondpage’就是路由鏈接
            {        
            		entry: pages+'/second/second.js',       
            		 template: pages+'/second/second.html',        
            		 filename: 'second/second',      
            }
}

• 以上就是多頁應用配置的基本過程了