Vue-Cli3配置多页面应用(详)

先创建一个vuecli3项目（前面的安装环境就不说了，下面配置任意选，我这里直接默认配置）

创建好了，如下目录

我们将页面添加上几个，先把原来的复制几份，为index1.html index2.html index3.html ，再把原来的index.html删了，看着舒服一点，这里每一个页面都一样

三个页面都创建好了，接下来我们需要为每一个页面准备单独的组件，单独的main.js，单独的路由，看我怎么做
先在src下创建一个目录pages，下面创建三个index文件夹，index1，index2.。。。，每一个index代标一个独立的页面数据

因为每一个应用都需要一个App.vue和main.js，所以我们将原来的在外边的
App.vue和main.js剪切掉，
分别复制到各个应用里面

接下来就是要告诉vue-cli我的配置
在根目录下新创建一个vue.config.js
添加一些数据

数据中pages属性是固定的，然后里面可以配置多个应用，每个应用指定了自己的入口，模板。名字和标题，
至此已经配置完成了，但是访问页面时会跳到err页面，因为没有index.html，想要访问端口就可以跳转正常页面可以将图中的index1.html改成index.html，配置也改了，不改的话需要手动访问index1.html才可以显示，路由router目录要创建在各自的index目录下，分别到各自的main.js中注册就可以正常使用了

Vue-Cli3配置多页面应用(详)相关推荐

vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园项目预览地址:https://volodya-01.github.io/vue2.0_t ...
vue/cli3 配置vux
安装各插件试过安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install ...
实战 Vue 之配置多页面应用
配置多页面应用前言一.搭建 Vue 脚手架二.调整项目结构三.修改相关配置四.验证结果五.总结前言最近一直在做企业钉钉应用开发,即每个功能模块都是一个单独的应用,单独的页面,配置到钉钉 ...
vue cli3 配置上线本地图标转换base64 显示
chainWebpack: config => {config.module.rule('images').use('url-loader').loader('url-loader').tap( ...
Vue cli3配置生产环境，开发环境，和测试环境
目录 1.先在package.json文件中添加: 2.在项目目录下建立 .env文件和.env.test文件 3.配置api变量 3.1.配置axios的baseURL路径 3. ...
vue项目配置nginx页面跳转正常，接口报200，但是没数据（很抱歉，如果没有启用JavaScript，XXX无法正常工作）
一.描述下问题:nginx代理跳转页面都可以进去,接口返回报200,但是就是没数据,response返回(We're sorry but XXX doesn't work properly witho ...
Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称: 每个入 ...
八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...

Vue-Cli3配置多页面应用(详)

Vue-Cli3配置多页面应用(详)相关推荐

最新文章

热门文章