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