Angular 8：运行 ng build --prod --base-href './project1' 时访问资产文件夹

Posted 2023-03-15

【中文标题】Angular 8：运行 ng build --prod --base-href \'./project1\' 时访问资产文件夹

【英文标题】：Angular 8: access the assets folder when running ng build --prod --base-href './project1'Angular 8：运行 ng build --prod --base-href './project1' 时访问资产文件夹

【发布时间】：2020-05-31 22:48:00

【问题描述】：

我的客户希望我使用以下配置在同一 ngnix 服务器上部署多个项目。

location /project1/ 
    alias /usr/local/var/www/project1/;
    try_files $uri$args $uri$args/ /project1/index.html;

在上述配置中，我无法访问资产文件夹，因为它位于 project1 文件夹中，我尝试从域示例 src 的根目录访问它：

url('/assets/fonts/texta/Texta-Regular/Texta-Regular.eot')

当我使用 src:url('./assets/fonts/texta/Texta-Regular/Texta-Regular.eot') 更改路径时，我在构建生产版本时遇到了以下问题

./src/styles.scss 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：模块错误： 模块错误（来自 ./node_modules/postcss-loader/src/index.js）： （发出的值而不是错误的实例） CssSyntaxError： /Users/Desktop/personal/projects/example/src/styles.scss:10115:13： 无法解决 './assets/fonts/texta/Texta-Regular/Texta-Regular.eot%3F' 在 '/Users/Desktop/personal/projects/example/src'

【参考方案1】：

你不能使用从“/”开始的绝对路径，所以你有两个选择：

1- 使用相对路径（使用“../”返回层次结构）。这个有点乱但是很容易做。

2- 在您的 tsconfig.json 的 compilerOptions 中定义您的资产文件夹，如下所示：

"compilerOptions": 
"baseUrl": ".",
"paths": 
  "@assets/*": ["./src/assets/*"],

然后您可以在您的网址中使用“@assets/”。记下 baseUrl 和 assets url，并根据您的项目结构进行相应更改。

希望这会有所帮助。

【参考方案2】：

我编译 url('./assets/fonts/texta/Texta-Regular/Texta-Regular.eot') 没有问题。 请检查 Texta-Regular.eot 是否存在。

【参考方案3】：

angular.json 中的 rebaseRootRelativeCssUrls 标志确实对我有用。