运行Truffle4.1.8的Dapp demo时出现YOU have META没有显示余额的问题

Truffle更新速度很快啊，导致网上很多教程都太旧了，会遇到很多问题。这篇博客主要解决今天遇到的关于“There was an error fetching your accounts”和YOU have META没有显示余额的问题。

我的Truffle版本4.1.8

问题主要出在两个原因：一个是chrome浏览器安装了MetaMask以太坊钱包插件 ； 另一个是Testrpc的监听端口和请求合约的端口不一致。下面是我完整的操作步骤：

一、安装ganache-cli

sudo npm install -g ganache-cli

二、在一个/home/test03目录下初始化项目

truffle unbox webpack  

三、修改 /app/javascripts 目录下 app.js 

window.addEventListener('load', function() {
  if (typeof web3 !== 'undefined') {
    console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 MetaCoin, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); //window.web3 = new Web3(web3.currentProvider);
  } else {
    console.warn("No web3 detected. Falling back to http://127.0.0.1:9545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://服务器ip地址:8545")); // 初始设置是http://127.0.0.1:9545，需要将ip地址换成服务器ip,端口号和testrpc端口一致
  }

上面这段代码即使前端调用web3的代码，ip地址和端口号没写好 访问不到合约

四、启动ganache-cli 

ganache-cli

原来我是用 truffle develop 启动的 也可以

五、编译部署Dapp

打开另一个终端连接，并cd 到初始化项目的目录

truffle migrate

如果需要重新编译部署 用命令 truffle migrate --reset

六、启动Dapp

npm run dev

如果私链部署在服务器，在本机 利用 npm run dev 启动访问不到的，解决办法是 找到package.json中修改下述

{
	scripts:{
		"dev": "webpack-dev-server –-host 0.0.0.0"
	}
}

七、即可打开浏览器访问

http://服务器ip地址:8080/