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配置详解