Vue-cli 打包部署项目

Vue 打包部署项目

---

使用Vue-cli 创建的项目，现在需要打包。

打开index.js文件。

找到assetsPublicPath 属性 将值/ 改为./

终端执行命令

npm run build

打包完成后，打开index.htm 发现 引入static 中的图片以及 使用 font-awesome 图标库无法正常加载。

图片的解决方式

如果是静态图片，src中只能使用绝对路径。
定义一个全局变量 路径

const absoultUrl = "http:localhost:8080"

然后在每个 scr 使用 数据绑定 :scr

这样打包就可以了

解决icon字体库无法正常显示

font awesome的坑再于webpack对文件打包大小有限制

而 font awesome 打包后大小 为400kb

所以修改webpack.base.conf.js文件中代码

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 80000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

这样就解决了！