javascript - 控制台中的 laravel vue 缩进问题

问题描述

我在 laravel 中使用 vue。面临控制台中分配缩进错误的问题。

我的 package.json 文件

"private": true,
  "scripts": {
    "clean": "rimraf public/build",
    "build": "npm run clean && webpack --mode development --progress",
    "watch": "npm run clean && npm run build -- --watch",
    "dev": "npm run clean && webpack-dev-server --mode development --hot --progress",
    "prod": "rimraf public/dist && cross-env NODE_ENV=production webpack --mode production --progress",
    "lint": "eslint --ext .js,.vue resources/js"
  },

我怎样才能摆脱所有更漂亮/更漂亮的错误？并成功构建没有任何问题。请指导或帮助。

我还应该在生产中运行哪个命令以使一切正常运行？

npm run watch in development errors 截图如下。npm run prod in production - 面临的问题

我是 vue 新手，所以不太了解它。

require('dotenv').config()
const path = require('path')
const webpack = require('webpack')

const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const WebpackNotifierPlugin = require('webpack-notifier')
const ManifestPlugin = require('webpack-manifest-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const hmr = process.argv.includes('--hot')
const production = process.env.NODE_ENV === 'production'
const devServerPort = parseInt(process.env.DEV_SERVER_PORT || '8080', 10)
const devServerUrl = process.env.DEV_SERVER_URL || 'http://localhost:8080'

const publicPathFolder = production ? '/dist/' : '/build/'
const publicPath = hmr ? `${devServerUrl}${publicPathFolder}` : publicPathFolder

function getEntryConfig (name, analyzerPort, alias = {}) {
  let plugins = [
    new VueLoaderPlugin(),
    new webpack.IgnorePlugin(/jsdom$/),
    new FriendlyErrorsWebpackPlugin(),
    new WebpackNotifierPlugin(),
    new MiniCssExtractPlugin({
      filename: production ? 'css/[name].[chunkhash].css' : 'css/[name].css'
    }),
    new ManifestPlugin({
      fileName: `manifest-${name}.json`,
      publicPath,
      writeToFileEmit: true
    })
  ]

  if (production) {
    plugins.push(...[
      new BundleAnalyzerPlugin({
        analyzerPort
      })
    ])
  }

  let postcssPlugins = [
    require('autoprefixer')()
  ]

  if (production) {
    postcssPlugins.push(require('cssnano')())
  }

  let cssLoaders = [
    hmr ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    }, {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        sourceMap: true,
        plugins: postcssPlugins
      }
    }
  ]

  return {
    entry: {
      [name]: [
        `./resources/js/${name}/app.js`,
        `./resources/sass/${name}/app.scss` 
      ]
    },
    output: {
      path: path.resolve(__dirname, 'public' + publicPathFolder),
      filename: production ? 'js/[name].[chunkhash].js' : 'js/[name].js',
      publicPath
    },
    module: {



      rules: [
        {
          test: /\.css$/,
          use: cssLoaders
        },
        {
          test: /\.scss$/,
          use: cssLoaders.concat([
            {
              loader: 'resolve-url-loader'
            }, {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true
              }
            }
          ])
        },
        {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre'
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                name: (path) => {
                  if (!/node_modules/.test(path)) {
                    return 'images/[name].[ext]?[hash]'
                  }

                  return `images/vendor-${name}/` + path
                    .replace(/\\/g, '/')
                    .replace(
                      /((.*(node_modules))|images|image|img|assets)\//g, ''
                    ) + '?[hash]'
                },
                limit: 4096
              }
            }
          ]
        },
        {
          test: /\.(woff2?|ttf|eot|svg|otf)$/,
          loader: 'url-loader',
          options: {
            name: (path) => {
              if (!/node_modules/.test(path)) {
                return 'fonts/[name].[ext]?[hash]'
              }

              return `fonts/vendor-${name}/[name].[ext]?[hash]`
            },
            limit: 4096
          }
        }
      ]
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /node_modules.*\.js$/,
            name: `vendor-${name}`,
            chunks: 'all'
          }
        }
      }
    },
    plugins,
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: Object.assign({
        'sweetalert2$': 'sweetalert2/dist/sweetalert2.js'
      }, alias)
    },
    externals: {
      jquery: 'jQuery',
      'popper.js': 'Popper'
    },
    devtool: production ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
      headers: {
        'Access-Control-Allow-Origin': '*'
      },
      historyApiFallback: true,
      compress: true,
      noInfo: true,
      quiet: true,
      port: devServerPort
    }
  }
}

module.exports = [

  getEntryConfig('frontend', 8888, {
    'vue$': 'vue/dist/vue.esm.js'

  }),



  getEntryConfig('backend', 8889),



];

标签： javascriptlaravelvue.jsvuejs2

javascript - 控制台中的 laravel vue 缩进问题

问题描述

解决方案

推荐阅读