webstrom 調試 Vue.js 單頁面程序

時間 2019-11-09

標籤 webstrom 調試 vue.js vue 頁面程序欄目 JavaScript 简体版

原文原文鏈接

前言

使用 webstrom 調試 Vue.js 單頁面程序，理論上來講應該是支持全部用 webpack 構建的應用程序css

webstrom版本：2017.1
代碼：使用 vue-cli 構建的基礎單頁面應用html

修改 webpack 配置

因爲 webpack 把全部文件所有打包到一塊兒，因此咱們須要 webpack 提供給咱們一個源地圖vue

修改 devtool 爲 source-map
這是個人開發配置文件 webpack.dev.conf.jswebpack

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})