Vue-Cli3多页面简单的配置（附Dome）

最新推荐文章于 2024-08-22 09:43:17 发布

旺旺ly

最新推荐文章于 2024-08-22 09:43:17 发布

阅读量505

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43430298/article/details/119871374

版权

本文介绍了如何使用Vue-Cli3搭建一个支持多页面的项目，包括修改项目目录结构，设置vue.config.js，以及处理设备切换时的页面跳转问题。详细步骤包括创建项目、调整目录结构，以及在entrance文件中根据设备类型进行页面跳转，并在main.ts中添加路由拦截以确保页面更新。

摘要由CSDN通过智能技术生成

在之前的开发中主要用的是vue-cli2，最近空闲时间比较多，接下来有新项目，本着学习的目的，自己重新开始使用Vue-Cli3+TypeScript搭建新项目。新项目使用的PC和移动端两套代码集成，所以就需要配置多页面。
该项目的GitHub：https://github.com/Elisony/vue-cli3-PC-

项目搭建：

** 1.首先使用Vue-Cli3创建一个vue项目，具体创建流程请百度。创建项目完成后，在根目录表添加vue.config.js用来增加Vue的webpack配置项。**


let glob = require('glob');
//配置pages多页面获取当前文件夹下的html和ts
function getEntry(globPath) {
   
    let entries = {
   }, tmp, htmls = {
   };
    // 读取src/PageEntry/**/底下所有的html文件
    glob.sync(globPath+'html').forEach(function(entry) {
   
        tmp = entry.split('/').splice(-3);
        htmls[tmp[1]] = entry
    })
    // 读取src/PageEntry/**/底下所有的ts文件</