Vue Cli3 多页面应用配置

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue Cli3 多页面应用配置

  • 环境说明

    • 新的改变

    • 文件目录

  • 配置步骤

    • 1. 安装插件

    • 2.路由文件配置

    • 3.对应页面js文件配置：

    • 3.vue.config.js 文件 配置多入口

    • 配置成功后，新增页面

环境说明

当前使用脚手架版本为vue cli 3.5 系列 ，本帖中未说明代理等相关配置，仅说明多页面配置

新的改变

  1. 于vue cli 2 系列不同的是，配置文件仅需修改一个文件，且为覆盖式；

  2. 配置简单，失败率低

文件目录


上面的文件目录有点看懵，没关系一步一步来

配置步骤

1. 安装插件

package.json文件中有新安装的插件配置，照着安装就好，版本适合自己就好

"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"vue-template-compiler": "^2.5.21",
"webpack-merge": "^4.2.1",

2.路由文件配置

export default {
        home: [//注意后面的配置会用到这里的命名
            {
            path: '/',
            components: require('@/views/Home.vue')
            }
        ],
        about:[
        {
          path: '/',
          components: require('@/views/About.vue')
        }
      ],
        feedback:[
        {
          path: '/',
          components: require('@/views/feedback.vue')
        }
      ]
    }

3.对应页面js文件配置：

	import Vue from 'vue'
    import App from '@/App.vue'
    import router from '@/router'
    import store from '@/store'
    import VueRouter from 'vue-router'
    //mint-ui start
    import MintUI from 'mint-ui';
    import 'mint-ui/lib/style.css';
    Vue.use(MintUI);
    Vue.use(VueRouter);
    let homeRouter = new VueRouter({
        routes: router.about});//about为路由文件中对应的命名;同理其他.vue 文件对应的js文件此处替换为对应名即可,其它无变动
    Vue.config.productionTip = false
    new Vue({
        router:homeRouter,
        store,
        render: function (h) { return h(App) }
    }).$mount('#app')

新增页面，需要增加对应js 文件 ，js文件中仅需修变以上注释行代码即可

3.vue.config.js 文件 配置多入口

module.exports = {
    pages: {
        about:{//和路由中的命名一样
            entry:"src/enter/about.js",//关联对应js文件作为入口
            filename: 'about.html',//文件名称
            title: 'about Page',
        },
        home:{
            entry:"src/enter/home.js",
            filename: 'home.html',
            title: 'home Page',
        },
        feedback:{
            entry:"src/enter/feedback.js",
            filename: 'feedback.html',
            title: 'feedback Page',
        },
    },
   ...

以上为全部配置步骤，

  • 配置多页面，与页面是否写好不影响，-------不报错就行╭(╯^╰)╮

  • 建议：写好一两个页面就开始配置，不易混乱、改动调试也较为方便

  • 测试是否成功 打包，查看是否打包为独立的 .html 文件

  • 运行下看看： 地址 /about.html#/ 这里是vue.config.js中 配置的文件名称

配置成功后，新增页面

记得新增对应js文件，且于

  • vue.config.js

  • router.js

    文件中添加对应配置即可

我的博客：https://cat.halfmy.com/2019/04/03/more-pageAPP/

转载请注明原地址：https://blog.csdn.net/qq_21113235/article/details/89149386

以上是 Vue Cli3 多页面应用配置 的全部内容， 来源链接： utcz.com/z/376865.html

回到顶部