Ci-dessous, je vais partager avec vous une méthode pour déboguer les projets Webpack et empaqueter les fichiers de configuration de manière indépendante. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.
Débogage du projet Webpack
-sourcemap
La configuration du webpack fournit l'option devtool, si Défini sur « #source-map », vous pouvez générer un fichier .map et afficher le code source lors du débogage dans le navigateur Chrome.
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: [] })
Après packaging, le fichier serverconfig.json sera généré dans le répertoire racine
Utilisation (vue-resourse) :
Vue.http.get("serverconfig.json").then((result)=>{ localStorage.setItem('ApiUrl',result.data.ApiUrl); console.log(localStorage.getItem('ApiUrl')); }).catch((error)=>{console.log(error)});
Ensuite, vous pouvez obtenir la valeur de la clé ApiUrl dans serverconfig.json. Il convient de noter que puisqu'il s'agit d'une opération asynchrone, pour la communication, vous pouvez utiliser localstorage pour stocker des éléments, c'est-à-dire localstorage.setItem ; vous pouvez l'utiliser lorsque vous utilisez localstorage.getItem
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Explication détaillée de l'utilisation des attributs en cas de changement dans IView
Utilisation de l'élément Axios pour implémenter Requêtes globales Méthode de chargement
Sélectionner la méthode de vérification multi-sélection du sélecteur dans iview
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!