手把手教你vue-cli单页到多页应用的方法

vue-cli到多页应用

前言:我有一个cli创建的vue项目,但是我想做成多页应用,怎么办,废话不多说,直接开撸~

约定:新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间,很多东西都写在注释里

第一步:cli一个vue项目

新建一个vue项目 官网 vue init webpack demo

cli默认使用webpack的dev-server服务,这个服务是做不了单页的,需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client

第二步:添加两个方法处理出口入口文件(SPA默认写死的)

进入刚刚创建vue项目 cd demo

在目录下面找到build/utils.js文件

修改部分:

utils.js

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

//add
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');  //功能:生成html文件及js文件并把js引入html
const pagePath = path.resolve(__dirname, '../src/views/'); //页面的路径,比如这里我用的views,那么后面私服加入的文件监控器就会从src下面的views下面开始监控文件
//end

exports.assetsPath = function (_path) {
 const assetsSubDirectory = process.env.NODE_ENV === 'production'
  ? config.build.assetsSubDirectory
  : config.dev.assetsSubDirectory

 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
 options = options || {}

 const cssLoader = {
  loader: 'css-loader',
  options: {
   sourceMap: options.sourceMap
  }
 }

 const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap
  }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }

  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
 const output = []
 const loaders = exports.cssLoaders(options)

 for (const extension in loaders) {
  const loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }

 return output
}

exports.createNotifierCallback = () => {
 const notifier = require('node-notifier')

 return (severity, errors) => {
  if (severity !== 'error') return

  const error = errors[0]
  const filename = error.file && error.file.split('!').pop()

  notifier.notify({
   title: packageConfig.name,
   message: severity + ': ' + error.name,
   subtitle: filename || '',
   icon: path.join(__dirname, 'logo.png')
  })
 }
}

//add 新增一个方法处理入口文件(单页应用的入口都是写死,到时候替换成这个方法)
exports.createEntry = () => {
 let files = glob.sync(pagePath + '/**/*.js');
 let entries = {};
 let basename;
 let foldername;

 files.forEach(entry => {
  // Filter the router.js
  basename = path.basename(entry, path.extname(entry), 'router.js');
  foldername = path.dirname(entry).split('/').splice(-1)[0];

  // If foldername not equal basename, doing nothing
  // The folder maybe contain more js files, but only the same name is main
  if (basename === foldername) {
   entries[basename] = [
    'webpack-hot-middleware/client?noInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',
    entry];
  }
 });
 return entries;
};
//end

//add 新增出口文件
exports.createHtmlWebpackPlugin = () => {
 let files = glob.sync(pagePath + '/**/*.html', {matchBase: true});
 let entries = exports.createEntry();
 let plugins = [];
 let conf;
 let basename;
 let foldername;

 files.forEach(file => {
  basename = path.basename(file, path.extname(file));
  foldername = path.dirname(file).split('/').splice(-1).join('');

  if (basename === foldername) {
   conf = {
    template: file,
    filename: basename + '.html',
    inject: true,
    chunks: entries[basename] ? [basename] : []
   };
   if (process.env.NODE_ENV !== 'development') {
    conf.chunksSortMode = 'dependency';
    conf.minify = {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
    };
   }

   plugins.push(new HtmlWebpackPlugin(conf));
  }
 });
 return plugins;
};
//end

第三步:创建私服(不使用dev-server服务,自己建一个)

从express新建私服并配置(build文件夹下新建 我这里叫webpack.dev.client.js)

webpack.dev.client.js

/**
 * created by qbyu2 on 2018-05-30
 * express 私服
 * */
'use strict';

const fs = require('fs');
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');  //文件监控(前面配置了从views下面监控)
const webpackHotMiddleware = require('webpack-hot-middleware');  //热加载
const config = require('../config');
const devWebpackConfig = require('./webpack.dev.conf');
const proxyMiddleware = require('http-proxy-middleware');  //跨域

const proxyTable = config.dev.proxyTable;

const PORT = config.dev.port;
const HOST = config.dev.host;
const assetsRoot = config.dev.assetsRoot;
const app = express();
const router = express.Router();
const compiler = webpack(devWebpackConfig);

let devMiddleware = webpackDevMiddleware(compiler, {
 publicPath: devWebpackConfig.output.publicPath,
 quiet: true,
 stats: {
  colors: true,
  chunks: false
 }
});

let hotMiddleware = webpackHotMiddleware(compiler, {
 path: '/__webpack_hmr',
 heartbeat: 2000
});

app.use(hotMiddleware);
app.use(devMiddleware);

Object.keys(proxyTable).forEach(function (context) {
 let options = proxyTable[context];
 if (typeof options === 'string') {
  options = {
   target: options
  };
 }
 app.use(proxyMiddleware(context, options));
});

//双路由  私服一层控制私服路由  vue的路由控制该页面下的路由
app.use(router)
app.use('/static', express.static(path.join(assetsRoot, 'static')));

let sendFile = (viewname, response, next) => {
 compiler.outputFileSystem.readFile(viewname, (err, result) => {
  if (err) {
   return (next(err));
  }
  response.set('content-type', 'text/html');
  response.send(result);
  response.end();
 });
};

//拼接方法
function pathJoin(patz) {
 return path.join(assetsRoot, patz);
}

/**
 * 定义路由(私服路由 非vue路由)
 * */

// favicon
router.get('/favicon.ico', (req, res, next) => {
 res.end();
});

// http://localhost:8080/
router.get('/', (req, res, next)=>{
 sendFile(pathJoin('index.html'), res, next);
});

// http://localhost:8080/home
router.get('/:home', (req, res, next) => {
 sendFile(pathJoin(req.params.home + '.html'), res, next);
});

// http://localhost:8080/index
router.get('/:index', (req, res, next) => {
 sendFile(pathJoin(req.params.index + '.html'), res, next);
});

module.exports = app.listen(PORT, err => {
 if (err){
  return
 }
 console.log(`Listening at http://${HOST}:${PORT}\n`);
})

私服创建好了 安装下依赖

有坑。。。

webpack和热加载版本太高太低都不行

npm install webpack@3.10.0 --save-dev
npm install webpack-dev-middleware --save-dev
npm install webpack-hot-middleware@2.21.0 --save-dev
npm install http-proxy-middleware --save-dev

第四步:修改配置webpack.base.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: config.dev.devtool,

 // these devServer options should be customized in /config/index.js
 devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  }
 },
 plugins: [
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  //del  注释掉spa固定的单页出口 末尾动态配上出口
  // new HtmlWebpackPlugin({
  //  filename: 'index.html',
  //  template: 'index.html',
  //  inject: true
  // }),
  //end
  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
   }
  ])
 ]
 //add
  .concat(utils.createHtmlWebpackPlugin())
 //end
})
//del
// module.exports = new Promise((resolve, reject) => {
//  portfinder.basePort = process.env.PORT || config.dev.port
//  portfinder.getPort((err, port) => {
//   if (err) {
//    reject(err)
//   } else {
//    // publish the new Port, necessary for e2e tests
//    process.env.PORT = port
//    // add port to devServer config
//    devWebpackConfig.devServer.port = port
//
//    // Add FriendlyErrorsPlugin
//    devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
//     compilationSuccessInfo: {
//      messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
//     },
//     onErrors: config.dev.notifyOnErrors
//     ? utils.createNotifierCallback()
//     : undefined
//    }))
//
//    resolve(devWebpackConfig)
//   }
//  })
// })
//end

webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: config.dev.devtool,

 // these devServer options should be customized in /config/index.js
 //del 注掉SPA的服务器
 // devServer: {
 //  clientLogLevel: 'warning',
 //  historyApiFallback: {
 //   rewrites: [
 //    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
 //   ],
 //  },
 //  hot: true,
 //  contentBase: false, // since we use CopyWebpackPlugin.
 //  compress: true,
 //  host: HOST || config.dev.host,
 //  port: PORT || config.dev.port,
 //  open: config.dev.autoOpenBrowser,
 //  overlay: config.dev.errorOverlay
 //   ? { warnings: false, errors: true }
 //   : false,
 //  publicPath: config.dev.assetsPublicPath,
 //  proxy: config.dev.proxyTable,
 //  quiet: true, // necessary for FriendlyErrorsPlugin
 //  watchOptions: {
 //   poll: config.dev.poll,
 //  }
 // },
 //end
 plugins: [
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  //del  注释掉spa固定的单页出口 末尾动态配上出口
  // new HtmlWebpackPlugin({
  //  filename: 'index.html',
  //  template: 'index.html',
  //  inject: true
  // }),
  //end
  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
   }
  ])
 ]
 //add
  .concat(utils.createHtmlWebpackPlugin())
 //end
})
//del
// module.exports = new Promise((resolve, reject) => {
//  portfinder.basePort = process.env.PORT || config.dev.port
//  portfinder.getPort((err, port) => {
//   if (err) {
//    reject(err)
//   } else {
//    // publish the new Port, necessary for e2e tests
//    process.env.PORT = port
//    // add port to devServer config
//    devWebpackConfig.devServer.port = port
//
//    // Add FriendlyErrorsPlugin
//    devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
//     compilationSuccessInfo: {
//      messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
//     },
//     onErrors: config.dev.notifyOnErrors
//     ? utils.createNotifierCallback()
//     : undefined
//    }))
//
//    resolve(devWebpackConfig)
//   }
//  })
// })
//end
module.exports = devWebpackConfig;

webpack.prod.conf.js

plugins最后加上.concat(utils.createHtmlWebpackPlugin())

test环境一样

第五步:修改package.json 指令配置

scripts下面'dev':

这样执行的时候就不会走默认的dev-server而走你的私服了

"scripts": {
  "dev": "node build/webpack.dev.client.js",
  "start": "npm run dev",
  "build": "node build/build.js"
 },

第六步:创建测试文件

src目录下新建 views文件夹 (代码注释里有 当时配的目录跟这个一致就可以 随便你命名 遵循命名规范就行)
views 文件夹下新建两个文件夹index和home 代表多页 每页单独一个文件夹 文件夹下建对应文件

最后,npm run dev

这个时候你会发现,特么的什么鬼文章 报错了啊

稍安勿躁~

两个地方,

1.webpack.dev.client.js

//双路由  私服一层控制私服路由  vue的路由控制该页面下的路由
app.use(router)
app.use('/static', express.static(path.join(assetsRoot, 'static')));

这个assetsRoot cli创建的时候是没有的 在config/index.js 下面找到dev加上

assetsRoot: path.resolve(__dirname, '../dist'),

顺便把dev和build的assetsPublicPath 路径都改成相对路径'./'

2.还是版本问题

webpack-dev-middleware 默认是3.1.3版本但是会报错

具体哪个版本不报错我也不知道

context.compiler.hooks.invalid.tap('WebpackDevMiddleware', invalid);

找不到invalid 源码里面是有的

卸载webpack-dev-middleware

npm uninstall webpack-dev-middleware

使用dev-server自带的webpack-dev-middleware (cli单页应用是有热加载的)

重新install dev-server

npm install webpack-dev-server@2.10.0 --save-dev
npm run dev

总结:核心点就在创建并配置私服和修改出口入口配置,坑就在版本不兼容

建议:cli一个vue的demo项目 从头撸一遍 再在实际项目里使用,而不是copy一下运行没问题搞定~

建议而已,你怎么打人,呜呜呜~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解如何使用 vue-cli 开发多页应用

    本文介绍了如何使用 vue-cli 开发多页应用,分享给大家,具体如下: 修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口 entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', }, 运行.编译的时候每一个入口都会对应一个Chunk run dev 开发环境 修改

  • vue-cli单页应用改成多页应用配置详解

    前言 从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目. 技术栈 vue: 2.0.1 vue-resource:1.0.3 vue

  • 详解Vue CLI3 多页应用实践和源码设计

    对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路: 首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下: pages:

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

  • 手把手教你vue实现动态路由

    目录 1.什么是动态路由? 2.动态路由的好处 3.动态路由如何实现 总结 1.什么是动态路由? 动态路由,动态即不是写死的,是可变的.我们可以根据自己不同的需求加载不同的路由,做到不同的实现及页面的渲染.动态的路由存储可分为两种,一种是将路由存储到前端.另一种则是将路由存储到数据库.动态路由的使用一般结合角色权限控制一起使用. 总结: 1)路由可变,不是写死的,动态加载 2)存储分两种:存前端,存数据库 2.动态路由的好处 使用动态路由可以跟灵活,无需手工维护,我们可以使用一个页面对路由进行维

  • 手把手教你用Node.js爬虫爬取网站数据的方法

    开始之前请先确保自己安装了Node.js环境,还没有安装的的童鞋请看一下安装教程...... https://www.jb51.net/article/113677.htm https://www.jb51.net/article/57687.htm 直接开始吧 1.在项目文件夹安装两个必须的依赖包 npm install superagent --save-dev SuperAgent(官网是这样解释的) -----SuperAgent is light-weight progressive

  • 手把手教你vue-cli单页到多页应用的方法

    vue-cli到多页应用 前言:我有一个cli创建的vue项目,但是我想做成多页应用,怎么办,废话不多说,直接开撸~ 约定:新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间,很多东西都写在注释里 第一步:cli一个vue项目 新建一个vue项目 官网 vue init webpack demo cli默认使用webpack的dev-server服务,这个服务是做不了单页的,需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client

  • 手把手教你使用Django + Vue.js 快速构建项目

    目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言 本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目 创建完成后,目录结构如下所示 使用 Navicat 工具创建数据库 DjangoVu

  • 手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

  • 比较详细的手把手教你写批处理(willsort题注版)第1/5页

    另,建议Climbing兄取文不用拘泥于国内,此类技术文章,内外水平相差极大:与其修正国内只言片语,不如翻译国外优秀著述. -------------------------------------------------------- 标题:手把手教你写批处理-批处理的介绍 作者:佚名 编者:Climbing 题注:willsort 日期:2004-09-21 -------------------------------------------------------- 批处理的介绍 扩展名

  • 一篇文章,教你学会Vue CLI 插件开发

    前言 如果你正在使用Vue框架,那么你肯定知道Vue CLI是什么.Vue-cli 3,它是Vue.js 开发的标准工具(脚手架),提供项目支架和原型设计. 除了日常构建打包项目,Vue CLI3 的一个重要部分是cli-plugins,插件开发. 本文将教你如何科学的创建一个Vue-CLI 插件,以及项目独立npm包. 1. 什么是CLI plugin 它可以修改内部webpack配置并将命令注入到vue-cli-service.一个很好的例子是@vue/cli-plugin-typescri

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • vue/react单页应用后退不刷新方案

    目录 引言 为什么麻烦 有坑的社区方案(以vue为例) 目前不错的方案 上效果图 vue中的实现 react中的实现 题外 该方案的优点 缺点 引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pushState/popState/replaceState,通过url中的pathName去匹配路由中定义的组件,加载进来并实例化渲染在项目的出口route

随机推荐