利用anywhere搭建本地服务器环境

最近做的一个项目前端是vue+elementUi的,第一次用vue，踩了不少坑...最近一个问题就是明明本地运行是没有任何问题的，偏偏打包发测试环境后，样式就不对了，有些按钮也不能点击了。发包不归我管，为了避免发包的麻烦，想找个方法本地打包运行dist文件，试了一些方法，不管怎么改，打开index文件都是空白页，后来找到今天的主角---anywhere，真的很不错，太方便了！

anywhere

anywhere是一个静态服务器的神器，使用它我们可以很简单快速的运行本地的dist文件

使用步骤：

1. 安装node.js

2. 任意文件夹下全局安装anywhere ：npm install anywhere -g

   image

   当看到有版本号出来，证明安装成功。

3. 前端项目打包，在前端项目根路径下输入命令：npm run build

4. 在dist文件夹下输入命令：anywhere

   image

   此时点击以第一个地址，就可以访问dist文件夹了

   anywhere -p 8000 // 指定静态服务器的端口号  
   anywhere -s // 静默执行，不打开浏览器
   

注意事项：

也许有些人，这样运行后，还是打不开dist文件，我们需要修改前端项目，然后再次打包，运行anywhere

1. 修改config目录下index.js文件中---assetsPublicPath：/前加点

    index: path.resolve(__dirname, '../dist/index.html'),
   
       // Paths
       assetsRoot: path.resolve(__dirname, '../dist'),
       assetsSubDirectory: 'static',
       assetsPublicPath: './',
   

2. 如果路由模式为history，修改为hash

   let router = new Router({
     routes: baseRoute,
     mode: 'hash'
   });