1

我有一个 vue.js 应用程序，当我运行“npm run dev”时它不会自动刷新 - 该应用程序只会在我运行“npm run build”时更新。

该应用程序将在我运行 npm run dev 时启动，但在我进行构建之前它没有最新的更改。

我认为这可能是由于我的内容库查看了我的“dist”文件夹，但如果我更改它或将其设置为 false，则应用程序根本不会在开发模式下运行。我得到一个带有“无法获取 /”的白页

我尝试使用 BrowserSyncPlugin 来完成这项工作，但这仍然没有使用我的最新更改更新页面。

但我只想能够在开发模式下运行我的应用程序并自动查看最新更改。

  • 操作系统：
  • 节点版本：10.13.0
  • 网络包版本：4.41.2
  • webpack-dev-server 版本：3.11.0

这是我的 webpack.config.dev：

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

module.exports = merge(baseConfig, {
  mode: 'development',

  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    contentBase: 'dist',
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: { warnings: false, errors: true },
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true,  // necessary for FriendlyErrorsPlugin
    hot: true,
    inline: true,
    watchContentBase: true
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                importer: nodeSassMagicImporter()
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../dist'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
    new FriendlyErrorsPlugin(),
    new BrowserSyncPlugin({
        host: 'localhost',
        port: config.dev.port,
        proxy: 'http://localhost:8080/',
        open: 'external'
      },
      {
        reload: false
      })
  ],
  performance: {hints: false},
  optimization: {splitChunks: {chunks: 'all'}}
})

这是我的 webpack.config.dev：

  module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  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', '.scss'],
    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: {
    setImmediate: false,

    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

这是我在 index.js 中的开发：

    dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    host: process.env.YOUR_HOST || 'localhost', 
    port: process.env.PORT || 8080,
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    useEslint: true,

    showEslintErrorsInOverlay: false,

    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

这是我的 package.json：

 "scripts": {
    "dev": "webpack-dev-server --inline --history-api-fallback --progress --config 
     build/webpack.dev.conf.js",
    "run": "npm run dev",
    "build": "node build/build.js"
 }
4

0 回答 0