Webpack/Vue/Vuetify/PWA 项目中的绝对路径问题答案

【问题标题】：Issues with absolute paths in Webpack/Vue/Vuetify/PWA ProjectWebpack/Vue/Vuetify/PWA 项目中的绝对路径问题
【发布时间】：2018-07-03 17:21:01
【问题描述】：

我在 /var/www/html/testing 中创建了一个新的（WebPack、Vue、Vuetify、PWA）项目：

vue init vuetifyjs/pwa myapp
cd myapp
yarn run dev

-> dev 模式下一切正常，页面可以在http://localhost:8080打开

生产版本：

yarn run build

-> 好的，dist 文件夹已创建并填充：

/var/www/html/testing/myapp/dist

我的 ngninx 服务器的 WebRoot 是 /var/www/html，所以我尝试用这个 url 打开 prod 版本：

http://localhost/testing/myapp/dist/

问题：无法在浏览器中打开应用，因为所有路径都是绝对路径，就像在 index.html 中一样：

<link rel=icon type=image/png sizes=32x32 href=/static/img/icons/favicon-32x32.png>
<link rel=manifest href=/static/manifest.json>
<link rel=preload href=/static/js/vendor.1c719443f0f3c271d7fd.js as=script>

等等。

在 manifest.json 中还有一个绝对路径：

"start_url": "/index.html"

将我的 WebRoot 更改为

/var/www/html/testing/myapp/dist

一切都按预期进行。但这不是一个选择。目标文件夹不是WebRoot，而是某个子文件夹。

我的猜测：一些配置文件中的一项或多项更改应该可以解决问题。

问：我该如何解决？

哪些文件是相关的，
必须调整哪些设置。

（是的，我浏览了 myapp、myapp/build、myapp/config 中的一些配置文件，但我真的看不出需要更改哪个文件/设置。）

顺便说一句：有 23478 个文件，但没有 'webpack.config.js'，我找到了这些：

ls config/
dev.env.js  index.js  prod.env.js  test.env.js

ls build/
build.js           service-worker-dev.js   webpack.dev.conf.js
check-versions.js  service-worker-prod.js  webpack.prod.conf.js
dev-client.js      utils.js                webpack.test.conf.js
dev-server.js      vue-loader.conf.js
load-minified.js   webpack.base.conf.js

还有一个额外的问题：为什么绝对路径仍然是默认路径？相对路径应该可以正常工作。很可能是有原因的，但我看不到。

【问题讨论】：

如果您将网络服务器配置为为主索引提供单独的子文件夹，则相对路径将无法正常工作，这在 vue 路由器的默认模式下是必需的

标签： webpack vue.js

【解决方案1】：

以防万一，如果您使用的是 Vue CLI 3，解决方案会有所不同，但仍然非常简单。

编辑您的vue.config.js（如果没有，请在项目根目录中创建）并添加以下行：

module.exports = {
  baseUrl: "./"
};

或者你想要的任何子目录。

您也可以根据NODE_ENV来决定。请参阅docs。

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

【讨论】：

【解决方案2】：

首先：RTFM。

然后在：

config/index.js

更改 assetsPublicPath：

    ...
    // assetsPublicPath: '/',
    assetsPublicPath: './',
    ...

这个 assetsPublicPath 在其他配置文件中用于创建 publicPath。

请注意：这里有类似 Ferrybig 和其他人的警告：https://github.com/vuejs-templates/webpack/issues/200：

如果 publicPath 是相对的，那么 vue 在处理“代码拆分”（无论是什么）和“拆分块”（无论是什么）方面都会遇到问题

但是：到目前为止，没有观察到任何恶意的副作用 - 祈祷。

【讨论】：