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

吉塞拉

我在/ 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打开产品版本:

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

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

吉塞拉

首先:RTFM。

然后在:

config/index.js

更改assetsPublicPath:

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

此assetPublicPath在其他配置文件中用于创建publicPath。

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

如果将publicPath设为相对,则vue将无法处理“代码拆分”(可能是这样)和“拆分块”(无论可能是什么)

但是:到目前为止,尚未发现任何恶意副作用-手指交叉。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Webpack在vue.js项目中使用('@')登录路径进行ES6导入

-configuration.output.path:提供的值“ public”不是绝对路径!与Webpack

在Webpack中建立相对于项目根目录的绝对路径

Angular CLI项目中的绝对路径

配置webpack使用绝对路径而不是相对路径

在vue-cli Webpack项目中导入Font Awesome

Webpack配置文件在Vue-CLI Webpack项目中的位置?

清除表单时出现Vue + Vuetify验证问题

并非所有CSS都能在Vuetify中与Vue.js和Webpack一起运行

webpack如何构建vue.js项目

Vue和Webpack中的动态导入路径

如何在vue-cli项目中动态使用Vuetify组件

Webpack 4-无法使用url-loader在src中加载具有绝对路径的图像

当包含在启用了Typescript的Vue.js项目中时,Vuetify停止工作

Vuetify / Vue-CLI问题编译;收到换行错误

如何在vue和vuetify中从本地项目插入字体?

Vue + Vuetify性能

使用vue.router重定向到绝对路径

Typescript / Electron / Webpack模块如何/为什么具有绝对路径?

开玩笑使用Webpack解析时无法检测到绝对路径

使用React + Webpack时如何使用绝对路径导入自定义scss?

Webpack2 无法解析:config.context 绝对路径

Vue.js 中的绝对路径

Webpack 相对路径 vs 绝对路径

无法在 vue webpack 项目中导入 Ace 文档对象?

覆盖 vue-vuetify 项目中的特定 css 属性

Webpack 'vue-loader' 编译问题与'@vue/compiler-sfc'

为什么在webpack的输出属性的入口点和绝对路径中使用相对路径?

webpack build 引用本地文件系统中的绝对路径