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


Posted in Javascript onMay 31, 2018

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 代表多页 每页单独一个文件夹 文件夹下建对应文件

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

最后,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'),

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

顺便把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

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

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

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

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

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

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

Javascript 相关文章推荐
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JavaScript模拟push
Mar 06 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
详解Angular4 路由设置相关
Aug 26 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
详解基于Node.js的HTTP/2 Server实践
May 31 #Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
vuejs实现标签选项卡动态更改css样式的方法
May 31 #Javascript
Vue组件之极简的地址选择器的实现
May 31 #Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 #Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
js加强的经典分页实例
2013/03/15 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python 实现插入排序算法
2012/06/05 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python随机数分布random测试
2018/08/27 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
新学期家长寄语
2014/01/19 职场文书
优秀学生事迹材料
2014/02/08 职场文书
聚美优品励志广告词
2014/03/14 职场文书
法制宣传月活动方案
2014/05/11 职场文书
审计班子对照检查材料
2014/08/27 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server