我正在尝试将Vue 3应用程序部署到Firebase Hosting。我之前曾使用非常相似的文件结构和设置成功地将Vue 2应用程序部署到Firebase Hosting。
问题是，当我部署到Firebase时，我的所有图像和资产都不会显示在网页中。当在检查器中检查单个元素时，我可以看到图像，它们实际上被上传到Firebase Hosting，但它没有显示在实际的网站上。尝试运行"npm-run serveProd"时也会发生同样的情况。
当在开发模式下运行"npm-run-serve"时，我的所有图像和资产都能完美工作。
我正在使用Typescript、Vue 3和Babel。这是我的firebase.json
{
"functions": {
"source": "functions"
},
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
这是我的vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `
@import "@/styles/variables.scss";
@import "@/styles/text.scss";
@import "@/styles/elements.scss";
`,
},
},
},
};
这是我的tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env"],
"paths": {
"@/*": ["src/*"],
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
"exclude": ["node_modules"]
}
资产被放置在公共目录中。我并没有对上面的文件做太大的更改，所以我认为默认行为应该有效，但事实并非如此。我已经尝试了所有的方法，非常感谢对这一点的指导或指导。
编辑-基于我们在评论中的讨论
常规配置(特别是vuejs配置(
应用程序捆绑包的基本URL将部署在publicPath中。这相当于webpack的output.publicPath，但Vue CLI也需要此值用于其他用途。
默认情况下，Vue CLI假定您的应用程序将部署在域的根目录下，例如。https://www.my-app.com/.如果您的应用程序部署在子路径上，则需要使用此选项指定该子路径。例如，如果您的应用程序部署在https://www.foobar.com/dist/，将publicPath设置为'/dist/'。
该值也可以设置为空字符串("(或相对路径(./(，以便使用相对路径链接所有资产。这允许构建的捆绑包部署在任何公共路径下，或在基于文件系统的环境中使用，如Cordova混合应用程序。
这一价值观在发展过程中也受到尊重。如果您希望您的开发服务器在根目录下提供服务，您可以使用一个条件值：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
关于index.html
文件dist/index.html是一个将使用html webpack插件处理的模板。在构建过程中，将自动注入资产链接。此外，Vue CLI还自动为构建过程中生成的JavaScript和CSS文件注入资源提示(预加载/预取(、清单/图标链接(使用PWA插件时(以及资产链接。
由于索引文件用作模板，因此可以使用lodash模板语法在其中插入值：
<%= VALUE %>用于无标距插值<%- VALUE %>用于HTML转义插值- 用于JavaScript控制流的
<% expression %>
除了html-webpack-plugin公开的默认值外，所有客户端env变量也可以直接使用。例如，要使用BASE_URL值：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
在您的firebase.json中，您应该将"public": "dist"更改为"public": "/"，
基本上，您的URL正在寻找一个名为/dist/的子文件夹，但公用文件夹确实是dist，所以您只需要将其从图像标签中删除。
例如，替换https://some_url.com/dist/tasker_logo.png与https://some_url[/em>.com/tasker_logo.png>，您将看到您要查找的图像。
如果这不起作用，试着给出完整的路径，而不是../assets/logo.png，试着src/assets/logo.png或类似的东西。它应该是完整路径