vue3怎么简单地做成多页面

最新推荐文章于 2024-05-28 14:49:49 发布

qq_42750608

最新推荐文章于 2024-05-28 14:49:49 发布

阅读量2.3k

点赞数 2

分类专栏： vue vuex vue多页面文章标签： vue3配置成为多页面

本文链接：https://blog.csdn.net/qq_42750608/article/details/108341128

版权

vue 同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

vuex

4 篇文章 0 订阅

订阅专栏

vue多页面

1 篇文章 0 订阅

订阅专栏

首先是vue.config.js--主要是在module.exports中加入pages的配置(最重要的一点):

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: "src/views/index/main.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    ui: {
      // page 的入口
      entry: "src/views/ui/main.js",
      // 模板来源
      template: "public/ui.html",
      // 在 dist/index.html 的输出
      filename: "ui.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "ui"]
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: "src/subpage/main.js"
  }
}

2.按照上面的目录结构,在src下面新建目录和文件,index和ui的写法就像一个小型的单页面vue一样,可以单独写main.js,App.vue,router,vuex,filter等

重要的是不要忘了在public目录下把html文件新建一下,为了方便理解,html的div=>id都是app

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>xeleme</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but xeleme doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import '@/assets/style/reset.css'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'en-US',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('@/common/lang/zh'),   // 中文语言包
      'en-US': require('@/common/lang/en')    // 英文语言包
    }
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/a',
      name: 'a',
      component:()=>import('../components/a.vue'),
      children:[
        {
          path: '12',
          component:()=>import('../components/aa.vue')
        }
      ]
    }
  ]
});

export default router;

store/index.js

// 组装模块并导出 store 的地方
import Vue from 'vue'
import Vuex from 'vuex'

import loading from './modules/loading'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    loading,
  },
  strict: process.env.NODE_ENV !== 'production' // 严格模式
})

如果对vue3不清楚的可以查看这个博客:https://www.cnblogs.com/guiltyWay/p/10320653.html

qq_42750608

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue3怎么简单地做成多页面

首先是vue.config.js--主要是在module.exports中加入pages的配置(最重要的一点):module.exports = { pages: { index: { // page 的入口 entry: "src/views/index/main.js", // 模板来源 template: "public/index.html", // 在 dist/index.html 的输出 filename
复制链接

扫一扫