vuejs npm dev 服務器不顯示更新的輸出

Question

我在 wordpress 主題中使用 vuejs，一切都正確設置和工作。

npm run build完美npm run build並創建 dist 和 wordpress 從中獲取所有內容。

那有什么問題呢？

npm run dev也可以在控制台中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',
        ),
        PublicCSSAbstracts: path.resolve(
          __dirname,
          '../src/public/css/abstracts',
        ),
        PublicImg: path.resolve(__dirname, '../src/public/img'),
        masonry: 'masonry-layout',
        isotope: 'isotope-layout',
      },
    },
    watch: options.watch === 'true',
  };

  return config;
};

webpack.vue.build.js

    const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');

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

module.exports = () => {
  const config = {
    entry: {
      admin: './src/admin.js',
      public: './src/public.js',
    },
    output: {
      path: path.resolve(__dirname, '../dist'),
      publicPath: '',
      filename: 'js/[name].js',
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              sass: ExtractTextPlugin.extract({
                fallback: 'vue-style-loader?sourceMap',
                use: 'css-loader?sourceMap!sass-loader?sourceMap',
              }),
              scss: ExtractTextPlugin.extract({
                fallback: 'vue-style-loader?sourceMap',
                use: 'css-loader?sourceMap!sass-loader?sourceMap',
              }),
            },
            preserveWhitespace: false,
            postcss: [autoprefixer()],
          },
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
        {
          test: /\.js|\.vue$/,
          use: [
            {
              loader: 'eslint-loader',
              options: {
                configFile: path.resolve(__dirname, '../.eslintrc.json'),
              },
            },
          ],
          enforce: 'pre',
          exclude: /node_modules/,
        },
        {
          test: /\.(s)?css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'vue-style-loader?sourceMap',
            use: 'css-loader!postcss-loader!sass-loader',
          }),
        },
        {
          test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
          loader: 'file-loader',
          query: {
            name: '[hash].[ext]',
            outputPath: 'static/',
            publicPath: '../',
          },
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(['dist'], {
        root: path.resolve(__dirname, '../'),
        verbose: true,
      }),
      new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [autoprefixer()],
          context: '/',
        },
      }),
      new ExtractTextPlugin('css/[name].css'),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
      }),
      new StyleLintPlugin({
        configFile: path.resolve(__dirname, '../.stylelintrc.json'),
        syntax: 'scss',
        files: ['**/*.s?(a|c)ss', '**/*.vue'],
      }),
      new webpack.optimize.ModuleConcatenationPlugin(),
    ],
    externals: {
      jquery: 'jQuery',
    },
    resolve: {
      alias: {
        PublicJSUtilities: path.resolve(
          __dirname,
          '../src/public/js/utilities',
        ),
        PublicCSSAbstracts: path.resolve(
          __dirname,
          '../src/public/css/abstracts',
        ),
        PublicImg: path.resolve(__dirname, '../src/public/img'),
        masonry: 'masonry-layout',
        isotope: 'isotope-layout',
      },
    },
  };

  return config;
};

獲取有關文件夾結構的一些想法的屏幕截圖：

http://prntscr.com/n0cbg1

Answer 1

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

npm run build -- --watch