使用Vue CLI3開發多頁面應用

1、安裝vue-cli3

一、若是你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

二、安裝命令：npm install -g @vue/cli 或 yarn global add @vue/cli

三、經過vue --version這個命令來檢查其版本是否正確 (3.x)

     

 

2、建立一個項目

一、運行如下命令來建立一個新項目：vue create vue-page，項目名稱：vue-page。

二、你會被提示選取一個 preset。你能夠選默認的包含了基本的 Babel + ESLint 設置的 preset，也能夠選「手動選擇特性」來選取須要的特性。這裏選擇第2種方式。（根據本身的項目需求選取合適的配置，新手能夠一路回車）

三、這是項目建好以後的目錄結構：

四、進入當前項目：cd vue-page，運行項目：npm run serve  或   yarn serve

項目啓動成功：

 

 

3、構建多頁應用

一、在項目根目錄建立文件：vue.config.js

二、在項目src目錄下新建文件夾pages，來存放多個頁面

若是單個頁面有使用到axios，router等，都單獨建文件夾寫。最外層的App.vue，main.js能夠刪除。

每一個頁面就是一個單獨的文件夾，應包含.html，.js，.vue文件。

三、配置vue.config.js

module.exports = {
  // 默認狀況下，Vue CLI假設您的應用程序將部署在域的根目錄下。
  // https://www.xxxx.com/, 若是應用程序部署在子路徑上，則須要使用此選項指定子路徑。例如，若是您的應用程序部署在https://www.xxx.com/myapp/，集baseUrl到'/myapp/'
  publicPath: process.env.NODE_ENV === "production" ? "/myapp/" : "/",
  outputDir: "myapp", // 在yarn build時 生成文件的目錄 default:'dist'
  assetsDir: "static", // 放置生成的靜態資源 (js、css、img、fonts) 的目錄。default: ''
  pages: {
    // 多頁配置
    index: {
      entry: "./src/pages/index/index.js", // 配置入口js文件
      template: "./src/pages/index/index.html", // 主頁面
      filename: "index.html", // 打包後的html文件名稱
      title: "首頁", // 打包後的.html中<title>標籤的文本內容
      // 在這個頁面中包含的塊，默認狀況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    mobile: {
      entry: "./src/pages/mobile/mobile.js",
      template: "./src/pages/mobile/mobile.html",
      filename: "mobile.html",
      title: "詳情",
      chunks: ['chunk-vendors', 'chunk-common', 'mobile']
    }
  },
  devServer: {
    index: "index.html", // 默認啓動serve 打開index頁面
    port: 8099, // 端口號
    open: true // 配置自動啓動瀏覽器
  }
};

四、頁面之間的跳轉能夠經過a標籤來跳轉

五、打包：npm run build 或 yarn build

能夠看到有2個html。

 

至此，多頁應用搭建完成。想要了解更多，能夠前去官網學習：https://cli.vuejs.org/zh/guide/

 

 補充：

拉取2.x模板（舊版本）

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project