将Vue-cli搭建的项目改造成多页面应用时对项目结构和配置的调整

创建项目

首先初始化一个Vue项目模板,之后在模板下载时候会弹出如下配置选项

vue init webpack demo

配置好后按下回车就构建完成了Vue脚手架,之后cd进入项目,并且进行node模块的安装

npm install

这时候Vue-cli的准备工作就完成了,这时候可以通过npm run dev进入开发环境,启动后是这个样子的,但是此时的脚手架的配置都是针对单页面应用进行的,入口只有一个index.html,所以下一步就要对项目目录的结构进行一些调整

对项目目录进行一些调整

我们主要针对的是src目录进行调整,首先来看看调整前的项目目录结构

进入src文件夹中,新建一个文件夹,取名pages,用于存放页面文件,然后在pages里面新建一个文件夹叫index用于存放首页,然后将下图红框内的文件(文件夹)都拉进index文件夹里面,还有最外层的index.html也拉进去

这时候的src文件夹里面只有两个文件夹一个是components用于存放组件文件,pages用于存放页面,然后新建一个modules文件夹用于存放自己写的页面模块

最后进入index文件夹,将里面的main.js改成index.js,保证页面的入口js文件和模板文件的名称一致,这时候的项目目录结构接调整完毕了

对相应的配置文件进行修改

首先进入build文件夹下的utils文件中进行修改,在utils文件中添加两个函数

// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require(‘glob‘)
// 页面模板
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
// 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, ‘../src/pages‘)
// 用于做相应的merge处理
var merge = require(‘webpack-merge‘)

// 多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在
// 那么就作为入口处理
exports.entries = function() {
  var entryFiles = glob.sync(PAGE_PATH + ‘/*/*.js‘)
  var map = {}
  entryFiles.forEach((filePath) => {
    var filename = filePath.substring(filePath.lastIndexOf(‘\/‘) + 1, filePath.lastIndexOf(‘.‘))
    map[filename] = filePath
  })
  return map
}

//多页面输出配置
// 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中
exports.htmlPlugin = function() {
  let entryHtml = glob.sync(PAGE_PATH + ‘/*/*.html‘)
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf(‘\/‘) + 1, filePath.lastIndexOf(‘.‘))
    let conf = {
      template: filePath,// 模板来源
      filename: filename + ‘.html‘,// 文件名称
      // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
      chunks: [‘manifest‘, ‘vendor‘, filename],
      inject: true
    }
    if (process.env.NODE_ENV === ‘production‘) {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: ‘dependency‘
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

修改build/webpack.base.conf.js的入口配置,找到这一段 

修改为

entry: utils.entries(),

修改build/webpack.dev.conf.js(开发环境)和build/webpack.prod.conf.js(生产环境)的多页面配置

开发环境build/webpack.dev.conf.js,找到该段并且注释掉,然后在后面添加.concat(utils.htmlPlugin())

生产环境webpack.prod.conf.js,注释掉这段,并且在后面添加.concat(utils.htmlPlugin())

对页面应用配置已基本完成,进行测试

这时候可以在pages里面添加一个test文件夹,在test文件夹里面创建一个html文件作为测试页面

然后重新npm run dev打开开发环境,在路径中输入test.html,如果能进入test页面,那么就多页面应用的配置就成功了

时间: 2024-10-09 03:35:21

将Vue-cli搭建的项目改造成多页面应用时对项目结构和配置的调整的相关文章

Vue Cli搭建域名服务器常见问题

Vue Cli搭建域名服务器常见问题 Vue Cli不使用反向代理配置域名 通过npm run serve命令执行Vue项目只能通过IP地址来访问,即使域名服务中设置DNS依然访问不到.有以下三种解决办法: 1.修改项目根目录下[email protected]\cli-service\lib\options.js文件 //第133行 devServer: { /* open: process.platform === 'darwin', host: '0.0.0.0',//改为域名 port:

怎么将linux下的项目转换成windows的VS2010下的项目?

怎么将linux下的项目转换成windows的VS2010下的项目? 不显示删除回复             显示所有回复             显示星级回复             显示得分回复             只显示楼主           收藏 liuchao35758600 灼眼的超哥 本版等级: 结帖率:100% 楼主发表于: 2013-02-17 12:17:10 本帖最后由 liuchao35758600 于 2013-02-17 12:18:14 编辑 linuxwin

vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告

报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter

Eclipse项目中引用第三方jar包时将项目打包成jar文件的两种方式

转载自:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFEST.MF”, 由于是打包引用了第三方jar包的Java项目,故需要自定义配置文件MANIFEST.MF,在该项目下建立文件MANIFEST.MF,内容如下: Manifest-Version: 1.0 Class-Path: lib/commons-codec.jar lib/commons-htt

将react项目打包成静态页面部署到nginx服务器

1.https://blog.csdn.net/weixin_33859665/article/details/91465664 2. 链接:https://www.cnblogs.com/martinl/p/10908607.html 命令kill -9 pid杀死进程,pid是系统的父进程号 Ubuntu下载nginx:https://www.jb51.net/article/71384.htm 链接2:https://blog.csdn.net/qq_23832313/article/de

Vue环境搭建以及生命周期

Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm vue ~~ django:vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包,安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.t

Vue CLI 3.x搭建Vue项目

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c