vue项目打包 打包运行报错以及Element UI字体图标不显示问题解决详细过程

vue项目本地开发完成后要部署上限，需要先把项目打包，打包步骤我经过试错，总结出简单3步完成。

通常打包：

非首次打包可直接：npm run build
即项目前期已经配置好，并经打包部署过运行没有什么问题，后期局部修改后重新打包，可直接运行以上命令进行打包。

---

项目初次打包发布

项目初次打包部署或打包后运行有问题，需进行以下三步操作，下文内容虽然多，实际上是非常详细的把步骤和问题描述清楚，可根据实际问题定位：

第1,2步中修改的2处文件位置：

1.config>index.js 文件
里面的dev是开发环境，build是打包部署运行的版本。

找到build下面的 assetsPublicPath: ‘/’，然后修改为 assetsPublicPath: ‘./’（即“/”前加点）

小提示：
上面这步修改完可能有些直接npm run build打包后项目都正常了，可跳过下面第二步，如果打包后运行有类似下面的报错，需进行下面第二步的配置。

类似打包出错显示空白页，或者Failed to load resource: net::ERR_FILE_NOT_FOUND

2.build>webpack.prod.conf.js 文件

按上面的位置找到webpack.prod.conf.js文件，在里面的output添加参数：publicPath:’./’

3.element ui 字体文件加载出错

如果没有引入element ui字体图标的话，可能到这步就重新打包就正常了，如果引入了element
ui的话可能还会出现如下的问题（两个字体文件加载不到）：

问题原因：

查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader
处理后在 static/fonts 目录下生成相应的文件。

也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求
/static/css/static/fonts/**，自然报 404 错误。

解决方法

打开 build/utils.js 文件，在如下位置添加 publicPath: ‘…/…/’

修改完毕后重新 npm run build 发布，可以发现图标已经可以正常显示了。

4.执行打包命令 npm run build。

执行以上命令约1分钟左右完成即可完成打包。
执行完毕后会在项目根目录下生成一个dist目录，直接在浏览器运行dist>index.html文件，即可查看项目是否正常。

至此，可以把dist文件夹内的文件打包，上传到服务器部署。

---

补充：给项目添加favicon.ico图标