Vue Cli3 多页面应用配置

Vue Cli3 多页面应用配置

  • 环境说明
    • 新的改变
    • 文件目录
  • 配置步骤
    • 1. 安装插件
    • 2.路由文件配置
    • 3.对应页面js文件配置:
    • 3.vue.config.js 文件 配置多入口
    • 配置成功后,新增页面

环境说明

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

新的改变

  1. 于vue cli 2 系列不同的是,配置文件仅需修改一个文件,且为覆盖式;
  2. 配置简单,失败率低

文件目录

Vue Cli3 多页面应用配置_第1张图片
上面的文件目录有点看懵,没关系一步一步来

配置步骤

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)