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

vue-cli 到多页应用

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

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

第一步：cli 一个 vue 项目

新建一个 vue 项目 官网：

1. vue init webpack demo

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

第二步：添加两个方法处理出口入口文件（SPA 默认写死的）

进入刚刚创建 vue 项目

1. cd demo

在目录下面找到 build/utils.js 文件，修改部分，utils.js

1. 'use strict'

2. const path = require('path')

3. const config = require('../config')

4. const ExtractTextPlugin = require('extract-text-webpack-plugin')

5. const packageConfig = require('../package.json')

7. //add

8. const glob = require('glob');

9. const HtmlWebpackPlugin = require('html-webpack-plugin');   //功能：生成html文件及js文件并把js引入html

10. const pagePath = path.resolve(__dirname, '../src/views/');  //页面的路径，比如这里我用的views，那么后面私服加入的文件监控器就会从src下面的views下面开始监控文件

11. //end

13. exports.assetsPath = function (_path) {

14.  const assetsSubDirectory = process.env.NODE_ENV === 'production'

15.    ? config.build.assetsSubDirectory

16.    : config.dev.assetsSubDirectory

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

19. }

21. exports.cssLoaders = function (options) {

22.  options = options || {}

24.  const cssLoader = {

25.    loader: 'css-loader',

26.    options: {

27.      sourceMap: options.sourceMap

28.    }

29.  }

31.  const postcssLoader = {

32.    loader: 'postcss-loader',

33.    options: {

34.      sourceMap: options.sourceMap

35.    }

36.  }

38.  // generate loader string to be used with extract text plugin

39.  function generateLoaders (loader, loaderOptions) {

40.    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

42.    if (loader) {

43.      loaders.push({

44.        loader: loader + '-loader',

45.        options: Object.assign({}, loaderOptions, {

46.          sourceMap: options.sourceMap

47.        })

48.      })

49.    }

51.    // Extract CSS when that option is specified

52.    // (which is the case during production build)

53.    if (options.extract) {

54.      return ExtractTextPlugin.extract({

55.        use: loaders,

56.        fallback: 'vue-style-loader'

57.      })

58.    } else {

59.      return ['vue-style-loader'].concat(loaders)

60.    }

61.  }

63.  // https://vue-loader.vuejs.org/en/configurations/extract-css.html

64.  return {

65.    css: generateLoaders(),

66.    postcss: generateLoaders(),

67.    less: generateLoaders('less'),

68.    sass: generateLoaders('sass', { indentedSyntax: true }),

69.    scss: generateLoaders('sass'),

70.    stylus: generateLoaders('stylus'),

71.    styl: generateLoaders('stylus')

72.  }

73. }

75. // Generate loaders for standalone style files (outside of .vue)

76. exports.styleLoaders = function (options) {

77.  const output = []

78.  const loaders = exports.cssLoaders(options)

80.  for (const extension in loaders) {

81.    const loader = loaders[extension]

82.    output.push({

83.      test: new RegExp('\\.' + extension + '$'),

84.      use: loader

85.    })

86.  }

88.  return output

89. }

91. exports.createNotifierCallback = () => {

92.  const notifier = require('node-notifier')

94.  return (severity, errors) => {

95.    if (severity !== 'error') return

97.    const error = errors[0]

98.    const filename = error.file && error.file.split('!').pop()

100.    notifier.notify({

101.      title: packageConfig.name,

102.      message: severity + ': ' + error.name,

103.      subtitle: filename || '',

104.      icon: path.join(__dirname, 'logo.png')

105.    })

106.  }

107. }

109. //add  新增一个方法处理入口文件（单页应用的入口都是写死，到时候替换成这个方法）

110. exports.createEntry = () => {

111.  let files = glob.sync(pagePath + '/**/*.js');

112.  let entries = {};

113.  let basename;

114.  let foldername;

116.  files.forEach(entry => {

117.    // Filter the router.js

118.    basename = path.basename(entry, path.extname(entry), 'router.js');

119.    foldername = path.dirname(entry).split('/').splice(-1)[0];

120.    // If foldername not equal basename, doing nothing

121.    // The folder maybe contain more js files, but only the same name is main

122.    if (basename === foldername) {

123.      entries[basename] = process.env.NODE_ENV === 'development' ?

124.        [

125.          'webpack-hot-middleware/client?noInfo=true&reload=true&path=/__webpack_hmr&timeout=20000',

126.          entry

127.        ]: [entry];

128.    }

129.  });

130.  return entries;

131. };

132. //end

134. //add 新增出口文件

135. exports.createHtmlWebpackPlugin = (publicModule) => {

136.  let files = glob.sync(pagePath + '/**/*.html', {matchBase: true});

137.  let entries = exports.createEntry();

138.  let plugins = [];

139.  let conf;

140.  let basename;

141.  let foldername;

142.  publicModule = publicModule || [];

144.  files.forEach(file => {

145.    basename = path.basename(file, path.extname(file));

146.    foldername = path.dirname(file).split('/').splice(-1).join('');

148.    if (basename === foldername) {

149.      conf = {

150.        template: file,

151.        filename: basename + '.html',

152.        inject: true,

153.        chunks: entries[basename] ? [basename] : []

154.      };

155.      if (process.env.NODE_ENV !== 'development') {

156.        conf.chunksSortMode = 'dependency';

157.        conf.minify = {

158.          removeComments: true,

159.          collapseWhitespace: true,

160.          removeAttributeQuotes: true

161.        };

162.        // 在构建生产环境时，需要指定共用模块

163.        conf.chunks = [...publicModule, ...conf.chunks];

164.      }

166.      plugins.push(new HtmlWebpackPlugin(conf));

167.    }

168.  });

169.  return plugins;

170. };

171. //end

第三步：创建私服（不使用 dev-server 服务，自己建一个）

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

1. /**

2. * created by qbyu2 on 2018-05-30

3. * express 私服

4. * */

5. 'use strict';

7. const fs = require('fs');

8. const path = require('path');

9. const express = require('express');

10. const webpack = require('webpack');

11. const webpackDevMiddleware = require('webpack-dev-middleware');   //文件监控(前面配置了从views下面监控)

12. const webpackHotMiddleware = require('webpack-hot-middleware');   //热加载

13. const config = require('../config');

14. const devWebpackConfig = require('./webpack.dev.conf');

15. const proxyMiddleware = require('http-proxy-middleware');   //跨域

17. const proxyTable = config.dev.proxyTable;

19. const PORT = config.dev.port;

20. const HOST = config.dev.host;

21. const assetsRoot = config.dev.assetsRoot;

22. const app = express();

23. const router = express.Router();

24. const compiler = webpack(devWebpackConfig);

26. let devMiddleware  = webpackDevMiddleware(compiler, {

27.  publicPath: devWebpackConfig.output.publicPath,

28.  quiet: true,

29.  stats: {

30.    colors: true,

31.    chunks: false

32.  }

33. });

35. let hotMiddleware = webpackHotMiddleware(compiler, {

36.  path: '/__webpack_hmr',

37.  heartbeat: 2000

38. });

40. app.use(hotMiddleware);

41. app.use(devMiddleware);

43. Object.keys(proxyTable).forEach(function (context) {

44.  let options = proxyTable[context];

45.  if (typeof options === 'string') {

46.    options = {

47.      target: options

48.    };

49.  }

50.  app.use(proxyMiddleware(context, options));

51. });

53. //双路由   私服一层控制私服路由    vue的路由控制该页面下的路由

54. app.use(router)

55. app.use('/static', express.static(path.join(assetsRoot, 'static')));

57. let sendFile = (viewname, response, next) => {

58.  compiler.outputFileSystem.readFile(viewname, (err, result) => {

59.    if (err) {

60.      return (next(err));

61.    }

62.    response.set('content-type', 'text/html');

63.    response.send(result);

64.    response.end();

65.  });

66. };

68. //拼接方法

69. function pathJoin(patz) {

70.  return path.join(assetsRoot, patz);

71. }

73. /**

74. * 定义路由(私服路由 非vue路由)

75. * */

77. // favicon

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

79.  res.end();

80. });

82. // http://localhost:8080/

83. router.get('/', (req, res, next)=>{

84.  sendFile(pathJoin('index.html'), res, next);

85. });

87. // http://localhost:8080/home

88. router.get('/:home', (req, res, next) => {

89.  sendFile(pathJoin(req.params.home + '.html'), res, next);

90. });

92. // http://localhost:8080/index

93. router.get('/:index', (req, res, next) => {

94.  sendFile(pathJoin(req.params.index + '.html'), res, next);

95. });

97. module.exports = app.listen(PORT, err => {

98.  if (err){

99.    return

100.  }

101.  console.log(`Listening at http://${HOST}:${PORT}\n`);

102. })

私服创建好了 安装下依赖，有坑。。。，webpack 和热加载版本太高太低都不行

1. npm install webpack@3.10.0 --save-dev

2. npm install webpack-dev-middleware --save-dev

3. npm install webpack-hot-middleware@2.21.0 --save-dev

4. npm install http-proxy-middleware --save-dev

`

第四步：修改配置

webpack.base.conf.js

1. //把原来写死的

2. entry: {

3.    app: './src/index.js'

4.  },

6. //改为：

7. entry: utils.createEntry(),

webpack.dev.conf.js

1. 'use strict'

2. const utils = require('./utils')

3. const webpack = require('webpack')

4. const config = require('../config')

5. const merge = require('webpack-merge')

6. const path = require('path')

7. const baseWebpackConfig = require('./webpack.base.conf')

8. const CopyWebpackPlugin = require('copy-webpack-plugin')

9. const HtmlWebpackPlugin = require('html-webpack-plugin')

10. const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

11. const portfinder = require('portfinder')

13. process.env.NODE_ENV = 'development';

15. const HOST = process.env.HOST

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

18. const devWebpackConfig = merge(baseWebpackConfig, {

19.  module: {

20.    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

21.  },

22.  // cheap-module-eval-source-map is faster for development

23.  devtool: config.dev.devtool,

25.  // these devServer options should be customized in /config/index.js

26.  //del  注掉SPA的服务器

27.  // devServer: {

28.  //   clientLogLevel: 'warning',

29.  //   historyApiFallback: {

30.  //     rewrites: [

31.  //       { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },

32.  //     ],

33.  //   },

34.  //   hot: true,

35.  //   contentBase: false, // since we use CopyWebpackPlugin.

36.  //   compress: true,

37.  //   host: HOST || config.dev.host,

38.  //   port: PORT || config.dev.port,

39.  //   open: config.dev.autoOpenBrowser,

40.  //   overlay: config.dev.errorOverlay

41.  //     ? { warnings: false, errors: true }

42.  //     : false,

43.  //   publicPath: config.dev.assetsPublicPath,

44.  //   proxy: config.dev.proxyTable,

45.  //   quiet: true, // necessary for FriendlyErrorsPlugin

46.  //   watchOptions: {

47.  //     poll: config.dev.poll,

48.  //   }

49.  // },

50.  //end

51.  plugins: [

52.    new webpack.DefinePlugin({

53.      'process.env': require('../config/dev.env')

54.    }),

55.    new webpack.HotModuleReplacementPlugin(),

56.    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

57.    new webpack.NoEmitOnErrorsPlugin(),

58.    // https://github.com/ampedandwired/html-webpack-plugin

59.    //del   注释掉spa固定的单页出口  末尾动态配上出口

60.    // new HtmlWebpackPlugin({

61.    //   filename: 'index.html',

62.    //   template: 'index.html',

63.    //   inject: true

64.    // }),

65.    //end

66.    // copy custom static assets

67.    new CopyWebpackPlugin([

68.      {

69.        from: path.resolve(__dirname, '../static'),

70.        to: config.dev.assetsSubDirectory,

71.        ignore: ['.*']

72.      }

73.    ])

74.  ]

75.  //add

76.    .concat(utils.createHtmlWebpackPlugin())

77.  //end

78. })

79. //del

80. // module.exports = new Promise((resolve, reject) => {

81. //   portfinder.basePort = process.env.PORT || config.dev.port

82. //   portfinder.getPort((err, port) => {

83. //     if (err) {

84. //       reject(err)

85. //     } else {

86. //       // publish the new Port, necessary for e2e tests

87. //       process.env.PORT = port

88. //       // add port to devServer config

89. //       devWebpackConfig.devServer.port = port

90. //

91. //       // Add FriendlyErrorsPlugin

92. //       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

93. //         compilationSuccessInfo: {

94. //           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],

95. //         },

96. //         onErrors: config.dev.notifyOnErrors

97. //         ? utils.createNotifierCallback()

98. //         : undefined

99. //       }))

100. //

101. //       resolve(devWebpackConfig)

102. //     }

103. //   })

104. // })

105. //end

106. module.exports = devWebpackConfig;

webpack.prod.conf.js

plugins 最后加上. concat(utils.createHtmlWebpackPlugin(['manifest', 'vendor'])) test 环境一样

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

scripts 下面'dev':

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

1. "scripts": {

2.    "dev": "node build/webpack.dev.client.js",

3.    "start": "npm run dev",

4.    "build": "node build/build.js"

5.  },

第六步：创建测试文件

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

打包改为相对路径 config/index.js build 下面

1. assetsPublicPath: '/',   =>   assetsPublicPath: './',

最后，npm run dev 或者 npm run build

测试环境自己配 跟 生产环境差不多，就几个配置参数不一样

这个时候你会发现，特么的什么鬼文章 报错了啊，稍安勿躁~，两个地方，

webpack.dev.client.js

1. //双路由   私服一层控制私服路由    vue的路由控制该页面下的路由

2. app.use(router)

3. app.use('/static', express.static(path.join(assetsRoot, 'static')));

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

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

还是版本问题

webpack-dev-middleware 默认是 3.1.3 版本但是会报错，具体哪个版本不报错我也不知道

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

找不到 invalid 源码里面是有的，卸载 webpack-dev-middleware

1. npm uninstall webpack-dev-middleware

使用 dev-server 自带的 webpack-dev-middleware （cli 单页应用是有热加载的），重新 install dev-server

1. npm install webpack-dev-server@2.10.0 --save-dev

1. npm run dev

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

建议：cli 一个 vue 的 demo 项目 从头撸一遍 再在实际项目里使用，而不是 copy 一下运行没问题搞定~ 建议而已，你怎么打人，呜呜呜~

原文：https://segmentfault.com/a/1190000015113584 作者：吃葡萄不吐番茄皮