原先是打算写一个 Chrome 插件，解决业务上数据抓取的一些自动化问题，过程中由于实在懒得写原生的 JavaScript 代码，想着用 Vue 来写，但是又想把界面写得正常些，问题又被引向了如何使用基于 Vue 的 UI 框架，最后觉得 BootstrapVue 不算太复杂，找到一个教程，重新复习了一遍使用 Vue CLI 创建 Vue 项目的过程。
再最后觉得还是得回归生成 Chrome 插件发布包，所以需要 build 下项目看看效果，结果使用 IIS 打不开页面，在 Vue 的开发模式下，使用 CLI 是正常的，排查后发现是 Webpack 配置的问题，修改后解决。
问题：
页面空白，打开 F12 开发者工具，发现是资源文件未加载成功
观察调试工具的错误，应该是资源文件的引用路径有问题，而且生成的页面路径如果加上
'./' 就会正常，但是不可能自己手动替换，页面多了那不是疯了。
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>vue-chrome-ext</title>
<link href=/css/app.4eff3fa4.css rel=preload as=style>
<link href=/css/chunk-vendors.cbc2a074.css rel=preload as=style>
<link href=/js/app.c5da824c.js rel=preload as=script>
<link href=/js/chunk-vendors.a81ce785.js rel=preload as=script>
<link href=/css/chunk-vendors.cbc2a074.css rel=stylesheet>
<link href=/css/app.4eff3fa4.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but vue-chrome-ext doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.a81ce785.js></script>
<script src=/js/app.c5da824c.js></script>
</body>
</html>
另外由于 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 一下，刷新浏览器，一切正常。
网友评论