以下では、Webpack プロジェクトをデバッグし、構成ファイルを個別にパッケージ化する方法を共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。
webpack プロジェクトのデバッグ
-sourcemap
webpack 設定では、devtool オプションを提供します。「#source-map」に設定すると、Chrome ブラウザーでのデバッグ時に .map ファイルを生成できます。表示される。
devtool: '#source-map' webpack独立生成可修改的配置文件 用generate-asset-webpack-plugin这个插件,在webpack.prod.config.js中去生成configServer.json文件, 让其build的时候生成json文件,然后时候get方法异步获取json,替换url即可 具体做法: 先安装generate-asset-webpack-plugin插件 npm install --save-dev generate-asset-webpack-plugin 在webpack.prod.conf.js里面配置
//让打包的时候输出可配置的文件 var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); var createServerConfig = function(compilation){ let cfgJson={ApiUrl:"http://139.129.31.108:8001"}; return JSON.stringify(cfgJson); }
//让打包的时候输入可配置的文件 new GenerateAssetPlugin({ filename: 'serverconfig.json', fn: (compilation, cb) => { cb(null, createServerConfig(compilation)); }, extraFiles: [] })
パッケージ化後、serverconfig.jsonファイルがルートディレクトリに生成されます
(vue-resource)を使用します:えー
は OK です。serverconfig.json のキー ApiUrl の値を取得します。これは非同期操作なので、通信の場合は、localstorage.setItem を使用して保存できます。 localstorage.getItem を使用してください
上記をすべての人のためにまとめました。将来的にはすべての人に役立つことを願っています。
関連記事:
IViewでのon-change属性の使用に基づく詳細な説明Axios Elementを使用してグローバルリクエストロードを実装する
以上がWebpack プロジェクトを通じてデバッグおよび独立したパッケージ化構成ファイルを実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。