vue 多頁面應用


參考來源:(https://www.jianshu.com/p/e1b01cdc2def)
vueCLI:(https://cli.vuejs.org/zh/config/#pages)

多頁面,不能共享vuex,狀態共享只能傳統方式:storage,cookie,URL querystring傳值

在vue.config.js中添加

  pages: {
    index: {
      // page 的入口
      entry: 'src/pages/index/main.js',
      // 模板來源就是在public里面創建的入口文件名
      template: 'public/index.html',
      // 編譯后在 dist文件夾中的輸出文件名,可選項,省略時默認與模塊名一致
      filename: 'index.html',
      // 當使用 title 選項時,
      // template 中的 title 標簽需要時 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'index',
      // 在這個頁面中包含的塊,默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時,也就是只有entry屬性時,直接用字符串表示模塊入口
    test: {
      // page 的入口
      entry: 'src/pages/test/test.js',
      // 模板來源就是在public里面創建的入口文件名
      template: 'public/test.html',
      // 編譯后在 dist文件夾中的輸出文件名,可選項,省略時默認與模塊名一致
      filename: 'test.html',
      // 當使用 title 選項時,
      // template 中的 title 標簽需要時 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'test標題'
    }
  },

目錄:

test.html

test.vue

test.js_

index.html

app.vue

main.js


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM