utils.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. 'use strict'
  2. const path = require('path')
  3. const config = require('../config')
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  5. const packageConfig = require('../package.json')
  6. exports.assetsPath = function(_path) {
  7. const assetsSubDirectory =
  8. process.env.NODE_ENV === 'production'
  9. ? config.build.assetsSubDirectory
  10. : config.dev.assetsSubDirectory
  11. return path.posix.join(assetsSubDirectory, _path)
  12. }
  13. exports.cssLoaders = function(options) {
  14. options = options || {}
  15. const cssLoader = {
  16. loader: 'css-loader',
  17. options: {
  18. sourceMap: options.sourceMap
  19. }
  20. }
  21. const postcssLoader = {
  22. loader: 'postcss-loader',
  23. options: {
  24. sourceMap: options.sourceMap
  25. }
  26. }
  27. // generate loader string to be used with extract text plugin
  28. function generateLoaders(loader, loaderOptions) {
  29. const loaders = []
  30. // Extract CSS when that option is specified
  31. // (which is the case during production build)
  32. if (options.extract) {
  33. loaders.push({
  34. loader: MiniCssExtractPlugin.loader,
  35. options: {publicPath:'../../'}
  36. })
  37. //loaders.push(MiniCssExtractPlugin.loader)
  38. /*return ExtractTextPlugin.extract({
  39. use: loaders,
  40. publicPath: '../../', //注意: 此处根据路径, 自动更改
  41. fallback: 'vue-style-loader'
  42. })*/
  43. } else {
  44. loaders.push('vue-style-loader')
  45. }
  46. loaders.push(cssLoader)
  47. if (options.usePostCSS) {
  48. loaders.push(postcssLoader)
  49. }
  50. if (loader) {
  51. loaders.push({
  52. loader: loader + '-loader',
  53. options: Object.assign({}, loaderOptions, {
  54. sourceMap: options.sourceMap
  55. })
  56. })
  57. }
  58. return loaders
  59. }
  60. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  61. return {
  62. css: generateLoaders(),
  63. postcss: generateLoaders(),
  64. less: generateLoaders('less'),
  65. sass: generateLoaders('sass', {
  66. indentedSyntax: true
  67. }),
  68. scss: generateLoaders('sass'),
  69. stylus: generateLoaders('stylus'),
  70. styl: generateLoaders('stylus')
  71. }
  72. }
  73. // Generate loaders for standalone style files (outside of .vue)
  74. exports.styleLoaders = function(options) {
  75. const output = []
  76. const loaders = exports.cssLoaders(options)
  77. for (const extension in loaders) {
  78. const loader = loaders[extension]
  79. output.push({
  80. test: new RegExp('\\.' + extension + '$'),
  81. use: loader
  82. })
  83. }
  84. return output
  85. }
  86. exports.createNotifierCallback = () => {
  87. const notifier = require('node-notifier')
  88. return (severity, errors) => {
  89. if (severity !== 'error') return
  90. const error = errors[0]
  91. const filename = error.file && error.file.split('!').pop()
  92. notifier.notify({
  93. title: packageConfig.name,
  94. message: severity + ': ' + error.name,
  95. subtitle: filename || '',
  96. icon: path.join(__dirname, 'logo.png')
  97. })
  98. }
  99. }