将 BootstrapVue 项目发布到 IIS 过程小记

原先是打算写一个 Chrome 插件，解决业务上数据抓取的一些自动化问题，过程中由于实在懒得写原生的 JavaScript 代码，想着用 Vue 来写，但是又想把界面写得正常些，问题又被引向了如何使用基于 Vue 的 UI 框架，最后觉得 BootstrapVue 不算太复杂，找到一个教程，重新复习了一遍使用 Vue CLI 创建 Vue 项目的过程。

再最后觉得还是得回归生成 Chrome 插件发布包，所以需要 build 下项目看看效果，结果使用 IIS 打不开页面，在 Vue 的开发模式下，使用 CLI 是正常的，排查后发现是 Webpack 配置的问题，修改后解决。

问题：

页面空白，打开 F12 开发者工具，发现是资源文件未加载成功

观察调试工具的错误，应该是资源文件的引用路径有问题，而且生成的页面路径如果加上 './' 就会正常，但是不可能自己手动替换，页面多了那不是疯了。

另外由于 IIS 中设置的并非根目录指向这个应用，相当于域名下有二级目录，因此自然出错了。

解决问题：

使用 Vue CLI 创建的项目下没看到 Webpack 的配置文件（如：webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件），查询后发现，在 node_modules 目录下 @vue 中的 cli-service 目录下可以找到相关配置。

不过等等，先别忙着上去改配置，Vue 官方不建议这么干。

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

解决方式：

有了以上思路，解决就不是大问题了。

• 首先在项目根目录下自己创建一个 vue.config.js 文件；
• 修改为如下代码：

module.exports = {
  // 默认是"/"
  publicPath: "./", 
};

重新 build 一下，刷新浏览器，一切正常。

参考文献

• Vue CLI 配置参考
• Vue CLI webpack 相关
• 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
• 如何配置 vue-cli 3.0 的 vue.config.js