Question

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

vue init vuetifyjs/pwa myapp
cd myapp
yarn run dev

- ＆GT;在开发模式下一切正常，页面可以在http://localhost:8080

中打开

生产构建：

yarn run build

- ＆GT;好的，创建并填充了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中的一些配置文件浏览过，但我真的看不到要更改的文件/设置。）

BTW：有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/'
    : '/'
}

Answer 2

首先：RTFM。

然后在：

config/index.js

更改assetsPublicPath：

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

此assetsPublicPath用于其他配置文件以创建publicPath。

请注意：有一些警告，例如Ferrybig和其他人发现的警告：https://github.com/vuejs-templates/webpack/issues/200：

如果publicPath是相对的，那么vue将有问题来处理＆＃39;代码分裂＆＃39; （无论这可能是什么）和＆＃39;拆分块＆＃39; （无论可能是什么）

然而：到目前为止没有观察到任何恶意副作用 - 手指交叉。

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

2 个答案: