vue官方脚手架（vue-cli）配置多页面应用（多页面网站）

因为之前有人问我配置vue多页面网站的问题，我在网上找了找教程，试了大概三四个，大概都是如出一辙，所以我就痛下决心，既然研究vue了，这个必须得搞明白的，也算排下小坑，我不知道你们在网上找的教程怎么样，可否能行，不过由于我弄得不行，所以就自己整了下，感觉弄完完美运行…….虽然很费事，但是研究研究代码，感觉恍然大悟，所以分享下
。
也不墨迹那么多了，也不详解了，直接上代码，修改步骤方法，有问题可以回复我哈~
（注：说一下我用的是vue官方脚手架<没注版本，应该就是最新的了 >，在此基础之上修改的）

（写的有点糙，各位谅解，先这样看下，我会在修改的）

Build文件夹下内容的修改
Utils,js文件区别
加上

var glob = require('glob')

加上

// 获取多级的入口文件
exports.getMultiEntry = function (globPath) {var entries = {},basename, tmp, pathname;glob.sync(globPath).forEach(function (entry) {basename = path.basename(entry, path.extname(entry));tmp = entry.split('/').splice(-4);var pathsrc = tmp[0] + '/' + tmp[1];if (tmp[0] == 'src') {pathsrc = tmp[1];}//console.log(pathsrc)pathname = pathsrc + '/' + basename; // 正确输出js和html的路径entries[pathname] = entry;//console.log(pathname+'-----------'+entry);});return entries;
}

Webpack.base,conf.js
加上 // 多页面设置入口文件 var entries = utils.getMultiEntry('./src/' + config.moduleName + '/**/**/*.js'); // 获得入口js文件 var chunks = Object.keys(entries); console.log(entries, 'entries-base') 找到下面这段话注释掉 // context: path.resolve(__dirname, '../'), // entry: { // app: './src/main.js' // },

注释掉的下面加上
entry: entries,

在webpack.dev.conf.js上面加上这两句话

var entries = utils.getMultiEntry('./src/' + config.moduleName + '/**/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);

找到下面这段注释掉

// new HtmlWebpackPlugin({//   filename: 'index.html',//   template: 'index.html',//   inject: true// }),// copy custom static assets// new CopyWebpackPlugin([//   {//     from: path.resolve(__dirname, '../static'),//     to: config.dev.assetsSubDirectory,//     ignore: ['.*']

vue官方脚手架（vue-cli）配置多页面应用（多页面网站）相关推荐

VUE学习-脚手架vue cli（六）
一.脚手架vue cli 官网文档:https://cli.vuejs.org/zh/guide/ A)安装vue/cli 1.使用以下命令安装: npm install -g @vue/cli # ...
Vue的脚手架工具cli安装
vue项目的快速构建工具 cli [ 脚手架 ] 什么是cli? cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack cli目前有哪些版本? cli2 cli3 cli ...
【Vue】脚手架 Vue CLI 的使用
安装脚手架 npm install @vue/cli -g 脚手架2npm install @vue/cli-init -g 脚手架2初始化项目:vue init webpack my-project
vue使用脚手架的单文件组件环境搭建
每一次新下载配置一个新的东西都会出现各种奇奇怪怪的问题,配置好几次,以此记录. 组件把一个页面拆分成一堆组件,每个组件都有自己的html.css 作用:简化项目编程,复用编码,提高运行效率单文件组 ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
Vue CLI配置与安装
文章目录一.关于Vue CLI 安装Node.js 安装Vue CLI 创建Vue CLI项目启动项目停止服务重启服务二. Vue CLI项目结构关于.vue视图文件关于路由配置关于r ...
Vue学习(一)基本属性、Axios通信、插槽、官方脚手架搭建
layout: post title: Vue学习(一)基本属性.Axios通信.插槽.官方脚手架搭建 description: Vue学习(一)基本属性.Axios通信.插槽.官方脚手架搭建 tag ...
根据vue的脚手架简单的搭建一个单页面
根据vue的脚手架简单的搭建一个单页面 1.首先需要安装npm node.js 自带,所以去安装node.js 就可以了. node中文网址这里是网址或者自行百度,网上很好找.另外还需要手动安装 ...
Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称: 每个入 ...

vue官方脚手架（vue-cli）配置多页面应用（多页面网站）

vue官方脚手架（vue-cli）配置多页面应用（多页面网站）相关推荐

最新文章

热门文章