HbuilderX打包Vue项目时出现--白屏，图标无法显示，端口占用，进程堵塞

一.HbuilderX打包vue项目白屏问题

将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件

build: {
    // assetsPublicPath: '/',//修改前
    assetsPublicPath: './',//修改后
}

二.HbuilderX打包vue项目，element-ui的icon图标无法正常显示问题

问题：使用vue-cli3脚手架搭建的项目，在打包文件上服务器的时候，其他的css，js样式都能正确加载出路径，
但是element的icon图标却不能正常加载出来。

问题分析：
加载的路径https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
本应该加载的路径https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff
打包的路径
事实上是打包时候读取的文件路径多了两层；
找到build文件的utils.js 中有打包的路径，看看generateLoaders();
Extract CSS when that option is specified, 指定该选项时提取CSS
发现少了个公共路径，加上pubilcPath

if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       // 解决icon路径加载错误
       publicPath:'../../'
     })
   } else {
     return ['vue-style-loader'].concat(loaders)
   }

三.win10系统端口被占用怎解决

1. 开始---->运行---->cmd，以<<<管理员>>>身份调出命令窗口

2. 查看被占用端口对应的PID(即进程ID)，输入命令：netstat -aon|findstr “端口号”，回车，记下最后一位数字，即PID，
   示例如下：
   #查看端口8005的使用情况
   netstat -aon|findstr “8005”
   #命令窗口显示的数据格式如下：
   TCP 127.0.0.1:8005 0.0.0.0:0 LISTENING 14700

   注1：netstat -ano命令可以用来查看所有端口使用情况，netstat -ano | findstr “8005” 查看指定端口号的使用情况
   注2：cls命令可以用来清屏

3. 根据PID查找进程
   继续输入tasklist|findstr “14700”，回车，查看是哪个进程或者程序占用了8005端口，结果是： javaw.exe
   javaw.exe 14700 Console 1 313,864 K

4. 此时结果已经很明白了，接下来我们可以到控制面板中的服务区查看此进程，手动关掉它。也可以在cmd中通过命令来关闭它，输入：
   taskkill /f /t /im javaw.exe

四.(nginx无法访问打包好的项目)其实问题是我们开启了多个Nginx的进程了，他是可以开启多个的。所以我们把开启多个的Nginx进程终止掉。

1. 在Nginx.exe路径下的CMD命令输入：

taskkill /fi “imagename eq nginx.EXE” /f

2. 再重新开启Nginx:

start nginx.exe

OK!可以访问了。