vue-vli3建立的項目配置熱更新

vue-vli3建立的項目配置熱更新

問題描述：使用vue-cli3建立的項目，修改代碼以後，瀏覽器頁面不會自動刷新，然而以前使用webpack初始化的vue項目修改代碼以後瀏覽器會從新加載一下，由於webpack初始化的項目能夠在webpack.config.js配置熱更新，具體配置下文見

解決：

使用vue ui導入當前項目，勾選啓動運行時編譯，能夠作到熱更新。

附0 VUE UI使用方法

附1 以前項目的webpack.config.js配置

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Proxy = require('./proxy');
var fs = require('fs')
// 定義文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);

module.exports = {
  devtool: 'source-map', // 配置生成Source Maps 選擇合適的選項
  // devtool: config.dev.devtool,
  // entry: './app/main.js', // 入口文件
  // entry: './src/main.js',// 入口文件 app: path.resolve(__dirname,'./src/main.js')
  entry: {
    // app: path.resolve(__dirname,'./src/main.js'),
    index: './src/main.js',
  },
  output: {
    path: __dirname + '/build', // 打包後文件存放位置
    filename: "[name].[hash].entry.js",
    chunkFilename: "[name].[hash].min.js"
    //publicPath: '/build/'
  },
  resolve: {
    // require時省略的擴展名
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // new ExtractTextPlugin('style.css'),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'template.html',
      inject: true
    }),
    //new webpack.optimize.CommonsChunkPlugin({name:'vendor',filename:'vendor.bundle.js'})

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
    })
  ],
  /*
  externals: {
    jquery: 'window.$'
  }, */
  devServer: {
    //contentBase: './public', // 本地服務器所加載的頁面所在的目錄
    historyApiFallback: true, // 不跳轉
    inline: true, // 實時刷新
    hot: true,
    proxy: Proxy
  },
  module: {
    loaders: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        /*
        options: {
            loaders: {
                css: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                })
            }
        } */
      },
      {
        test: /\.css$/,
        /*
        use: ExtractTextPlugin.extract({
            use: 'css-loader',
            fallback: 'style-loader'
        }) */
        loader: 'style-loader!css-loader'
        /*
        loader: 'style-loader!css-loader',
        options: {
            loaders: {
                css: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }
        } */
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|jgp)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[hash:7].[ext]'
        }
      },
      // {
      //    test: /\.js$/,
      //    loader: 'babel-loader',
      //    query: {
      //        compact: false
      //    }
      // },
      {
        test: /iview.src.*?js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.exec\.js$/,
        use: ['script-loader']
      }
    ]
  },
}

附2 vue-cli3.0配置詳解