webpack - Webpack/Vue/Vuetify/PWA 项目中绝对路径的问题

Question

我在/var/www/html/testing 中创建了一个新的(WebPack、Vue、Vuetify、PWA)项目:

vue init vuetifyjs/pwa myapp
cd myapp
yarn run 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

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

Answer 1

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

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

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

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

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

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