Maison > interface Web > js tutoriel > Comment configurer plusieurs pages en utilisant vue

Comment configurer plusieurs pages en utilisant vue

php中世界最好的语言
Libérer: 2018-05-28 13:44:44
original
1708 Les gens l'ont consulté

这次给大家带来如何使用vue配置多页面,使用vue配置多页面的注意事项有哪些,下面就是实战案例,一起来看一下。

1.安装环境

①安装node.js 并添加入环境变量PATH

②安装淘宝NPM镜像

1

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Copier après la connexion

③安装webpack

1

npm install webpack -g

Copier après la connexion

④安装vue-cli脚手架

1

npm install -g vue-cli

Copier après la connexion

创建项目模板 vue init wepack vue-multipage-demo

⑥cmd进入到要放项目的文件夹

⑦安装 cnpm install

2.目录结构调整

3.配置文件修改

①添加依赖 glob (返回目录中的所有子文件)

1

npm install glob

Copier après la connexion

②修改build文件夹中的utils.js文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

//新增代码

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

}

Copier après la connexion

③修改webpack.base.conf.js文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

function resolve (dir) {

 return path.join(dirname, '..', dir)

}

const createLintingRule = () => ({

 test: /\.(js|vue)$/,

 loader: 'eslint-loader',

 enforce: 'pre',

 include: [resolve('src'), resolve('test')],

 options: {

 formatter: require('eslint-friendly-formatter'),

 emitWarning: !config.dev.showEslintErrorsInOverlay

 }

})

module.exports = {

 context: path.resolve(dirname, '../'),

//注释代码开始

 // entry: {

 // app: './src/main.js'

 // },

//注释代码结束

//新增代码开始

 entry: utils.entries(),

//新增代码结束

 output: {

 path: config.build.assetsRoot,

 filename: '[name].js',

 publicPath: process.env.NODE_ENV === 'production'

  ? config.build.assetsPublicPath

  : config.dev.assetsPublicPath

 },

 resolve: {

 extensions: ['.js''.vue''.json'],

 alias: {

  'vue$''vue/dist/vue.esm.js',

  '@': resolve('src'),

 }

 },

 module: {

 rules: [

  ...(config.dev.useEslint ? [createLintingRule()] : []),

  {

  test: /\.vue$/,

  loader: 'vue-loader',

  options: vueLoaderConfig

  },

  {

  test: /\.js$/,

  loader: 'babel-loader',

  include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

  },

  {

  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

  loader: 'url-loader',

  options: {

   limit: 10000,

   name: utils.assetsPath('img/[name].[hash:7].[ext]')

  }

  },

  {

  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

  loader: 'url-loader',

  options: {

   limit: 10000,

   name: utils.assetsPath('media/[name].[hash:7].[ext]')

  }

  },

  {

  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

  loader: 'url-loader',

  options: {

   limit: 10000,

   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

  }

  }

 ]

 },

 node: {

 // prevent webpack from injecting useless setImmediate polyfill because Vue

 // source contains it (although only uses it if it's native).

 setImmediate: false,

 // prevent webpack from injecting mocks to Node native modules

 // that does not make sense for the client

 dgram: 'empty',

 fs: 'empty',

 net: 'empty',

 tls: 'empty',

 child_process: 'empty'

 }

}

Copier après la connexion

④修改webpack.dev.conf.js文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

 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

 //多页面输出配置

 //注释代码开始

  // 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: ['.*']

  }

 ])

 //新增代码开始

 ].concat(utils.htmlPlugin())

 //新增代码结束

})

Copier après la connexion

⑤修改webpack.prod.conf.js文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

   'use strict'

 const path = require('path')

 const utils = require('./utils')

 const webpack = require('webpack')

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

 const merge = require('webpack-merge')

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

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

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

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

 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

 const env = process.env.NODE_ENV === 'testing'

  require('../config/test.env')

  require('../config/prod.env')

 const webpackConfig = merge(baseWebpackConfig, {

  module: {

  rules: utils.styleLoaders({

   sourceMap: config.build.productionSourceMap,

   extract: true,

   usePostCSS: true

  })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

  path: config.build.assetsRoot,

  filename: utils.assetsPath('js/[name].[chunkhash].js'),

  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

  },

  plugins: [

  // http://vuejs.github.io/vue-loader/en/workflow/production.html

  new webpack.DefinePlugin({

   'process.env': env

  }),

  new UglifyJsPlugin({

   uglifyOptions: {

   compress: {

    warnings: false

   }

   },

   sourceMap: config.build.productionSourceMap,

   parallel: true

  }),

  // extract css into its own file

  new ExtractTextPlugin({

   filename: utils.assetsPath('css/[name].[contenthash].css'),

   // Setting the following option to `false` will not extract CSS from codesplit chunks.

   // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.

   // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 

   // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110

   allChunks: true,

  }),

  // Compress extracted CSS. We are using this plugin so that possible

  // duplicated CSS from different components can be deduped.

  new OptimizeCSSPlugin({

   cssProcessorOptions: config.build.productionSourceMap

   ? { safe: true, map: { inline: false } }

   : { safe: true }

  }),

  // generate dist index.html with correct asset hash for caching.

  // you can customize output by editing /index.html

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

  //注释代码开始

  // new HtmlWebpackPlugin({

  // filename: process.env.NODE_ENV === 'testing'

  //  ? 'index.html'

  //  : config.build.index,

  // template: 'index.html',

  // inject: true,

  // minify: {

  //  removeComments: true,

  //  collapseWhitespace: true,

  //  removeAttributeQuotes: true

  //  // more options:

  //  // https://github.com/kangax/html-minifier#options-quick-reference

  // },

   // necessary to consistently work with multiple chunks via CommonsChunkPlugin

  // chunksSortMode: 'dependency'

  // }),

  //注释代码结束

  // keep module.id stable when vendor modules does not change

  new webpack.HashedModuleIdsPlugin(),

  // enable scope hoisting

  new webpack.optimize.ModuleConcatenationPlugin(),

  // split vendor js into its own file

  new webpack.optimize.CommonsChunkPlugin({

   name: 'vendor',

   minChunks (module) {

   // any required modules inside node_modules are extracted to vendor

   return (

    module.resource &&

    /\.js$/.test(module.resource) &&

    module.resource.indexOf(

    path.join(dirname, '../node_modules')

    ) === 0

   )

   }

  }),

  // extract webpack runtime and module manifest to its own file in order to

  // prevent vendor hash from being updated whenever app bundle is updated

  new webpack.optimize.CommonsChunkPlugin({

   name: 'manifest',

   minChunks: Infinity

  }),

  // This instance extracts shared chunks from code splitted chunks and bundles them

  // in a separate chunk, similar to the vendor chunk

  // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk

  new webpack.optimize.CommonsChunkPlugin({

   name: 'app',

   async: 'vendor-async',

   children: true,

   minChunks: 3

  }),

  // copy custom static assets

  new CopyWebpackPlugin([

   {

   from: path.resolve(dirname, '../static'),

   to: config.build.assetsSubDirectory,

   ignore: ['.*']

   }

  ])

  //修改代码开始 

  ].concat(utils.htmlPlugin())

  //修改代码结束

 })

 if (config.build.productionGzip) {

  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(

  new CompressionWebpackPlugin({

   asset: '[path].gz[query]',

   algorithm: 'gzip',

   test: new RegExp(

   '\\.(' +

   config.build.productionGzipExtensions.join('|') +

   ')$'

   ),

   threshold: 10240,

   minRatio: 0.8

  })

  )

 }

 if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  webpackConfig.plugins.push(new BundleAnalyzerPlugin())

 }

 module.exports = webpackConfig

Copier après la connexion

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何进行Angular网络请求封装

如何实现vue input输入框模糊查询

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal