vuejs npm 开发服务器不显示更新的输出

共1个回答, 标签: javascript node.js vue.js webpack vuejs2

我在文字新闻主题中使用 vuejs, 一切都设置正确, 工作正常。

npm run build完美地工作, 并创建区和文字新闻拿起它的所有内容。

那么, 有什么问题呢?

npm run dev也在控制台中工作, 但当我在 vue 模板中进行了任何更改时, 它将编译, 但它不会显示更新的输出。

请指导和帮助。

webpack.config.dev.js

    const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');

if (fs.existsSync(path.resolve(__dirname, '../.env.example')) === true) {
  fs.renameSync(
    path.resolve(__dirname, '../.env.example'),
    path.resolve(__dirname, '../.env'),
  );
}

module.exports = (options = {}) => {
  const config = {
    entry: {
      admin: './src/admin.js',
      public: './src/public.js',
    },
    output: {
      path: path.resolve(__dirname, '../dist'),
      publicPath: 'http://localhost:9000/',
      filename: 'js/[name].js',
    },
    module: {
      rules: [{
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
              scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
            },
            preserveWhitespace: false,
            postcss: [autoprefixer()],
          },
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
          exclude: /node_modules/,
        },
        {
          test: /\.js|\.vue$/,
          use: [{
            loader: 'eslint-loader',
            options: {
              configFile: path.resolve(__dirname, '../.eslintrc.json'),
            },
          }, ],
          enforce: 'pre',
          exclude: /node_modules/,
        },
        {
          test: /\.(s)?css$/,
          use: [
            'vue-style-loader?sourceMap',
            'css-loader?sourceMap',
            'postcss-loader?sourceMap',
            'sass-loader?sourceMap',
          ],
        },
        {
          test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
          loader: 'file-loader',
          query: {
            name: '[hash].[ext]',
            outputPath: 'static/',
          },
          exclude: /node_modules/,
        },
        {
          test: /\.json$/,
          loader: 'json-loader',
        },
      ],
    },
    plugins: [
      new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [autoprefixer()],
          context: '/',
        },
      }),
      new StyleLintPlugin({
        configFile: path.resolve(__dirname, '../.stylelintrc.json'),
        syntax: 'scss',
        files: ['**/*.s?(a|c)ss', '**/*.vue'],
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.optimize.ModuleConcatenationPlugin(),
    ],
    devServer: {
      compress: true,
      contentBase: path.join(__dirname, '../dist'),
      headers: {
        'Access-Control-Allow-Origin': 'http://localhost',
      },
      hot: true,
      public: 'localhost:9000',
      port: 9000,
      overlay: {
        errors: true,
        warnings: true,
      },
    },
    devtool: 'eval-source-map',
    externals: {
      jquery: 'jQuery',
    },
    resolve: {
      alias: {
        PublicJSUtilities: path.resolve(
          __dirname,
          '../src/public/js/utilities',
第1个答案

--watch start 在文件中的字段中添加 package.json . 或使用此命令执行:

npm run build -- --watch

相关问题

如何从异步调用返回响应? 循环中的 JavaScript 闭包--简单的实际示例 如何从异步调用返回响应? Node 服务器将 Http 响应代码400返回到 Java 为什么按键搜索对象中的值的速度比在 js 中使用 "in" 要慢? 如何监控 RXJS 订阅数量? 如何在不添加历史记录的情况下推送到 vue 路由器? 找不到模块 “。/src/数据” 与 vue-cli 创建可以管理外部数据的抽象组件 类型错误: clean webpackplugin 不是构造函数 Postcss-svgo: TypeError: 无法设置未定义 (盖茨比) 的属性 “multiscont” Webpack 文件加载器输出 [目标模块] 如何修复 Vuejs 中的 “webpack Dev Server 无效选项” Laravel 中的 VUE2 组件寄存器 vuejs npm 开发服务器不显示更新的输出