搜索
首页运维Nginxnginx部署vue项目找不到js css文件如何解决

nginx部署vue项目找不到js css文件如何解决

很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件。

vue-cli@3

在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseurl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容:

...
module.exports = {
 baseurl: isprod
  ? '/basexxx/'
  : '/',
  ....
}

这里需要注意的是 dev 环境下不需要添加 baseurl 。

vue-cli@2

针对 非 vue-cli@3 生成的项目,你如果不关心 webpack 里面是如何实现的,你只需要找到 config/index.js , 修改其中的 build 中的 assetspublicpath 即可。

为了验证一下是否可行,你可以本地 build 一下,然后查看 dist/index.html 中引用的 js css 文件的路径是否携带上你刚刚设置的 assetspublicpath 即可。

而关心为啥这样设置就可以的同学们,继续看 build/webpack.base.conf.js 文件,


nginx部署vue项目找不到js css文件如何解决

非 production mode 下,是在config/index.js 中设置的,这里的 publicpath 默认是


nginx部署vue项目找不到js css文件如何解决

以上是nginx部署vue项目找不到js css文件如何解决的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:亿速云。如有侵权,请联系admin@php.cn删除
Nginx vs. Apache:看他们的架构Nginx vs. Apache:看他们的架构Apr 28, 2025 am 12:13 AM

NGINX和Apache在架构上的主要区别在于:NGINX采用事件驱动、异步非阻塞模型,而Apache使用进程或线程模型。1)NGINX通过事件循环和I/O多路复用机制高效处理高并发连接,适合静态内容和反向代理。2)Apache采用多进程或多线程模型,稳定性高但资源消耗大,适合需要丰富模块扩展的场景。

NGINX与Apache:检查优点和缺点NGINX与Apache:检查优点和缺点Apr 27, 2025 am 12:05 AM

NGINX适合处理高并发和静态内容,Apache则适用于复杂配置和动态内容。1.NGINX高效处理并发连接,适合高流量场景,但处理动态内容需额外配置。2.Apache提供丰富模块和灵活配置,适合复杂需求,但高并发性能较差。

nginx和apache:了解关键差异nginx和apache:了解关键差异Apr 26, 2025 am 12:01 AM

NGINX和Apache各有优劣,选择应基于具体需求。1.NGINX适合高并发场景,因其异步非阻塞架构。2.Apache适用于需要复杂配置的低并发场景,因其模块化设计。

NGINX单元:关键功能NGINX单元:关键功能Apr 25, 2025 am 12:17 AM

NGINXUnit是一个开源应用服务器,支持多种编程语言,提供动态配置、零停机更新和内置负载均衡等功能。1.动态配置:无需重启即可修改配置。2.多语言支持:兼容Python、Go、Java、PHP等。3.零停机更新:支持不中断服务的应用更新。4.内置负载均衡:可将请求分发到多个应用实例。

NGINX单元与其他应用程序服务器NGINX单元与其他应用程序服务器Apr 24, 2025 am 12:14 AM

NGINXUnit优于ApacheTomcat、Gunicorn和Node.js内置HTTP服务器,适用于多语言项目和动态配置需求。1)支持多种编程语言,2)提供动态配置重载,3)内置负载均衡功能,适合需要高扩展性和可靠性的项目。

NGINX单元:架构及其工作原理NGINX单元:架构及其工作原理Apr 23, 2025 am 12:18 AM

NGINXUnit通过其模块化架构和动态重配置功能提高了应用的性能和可管理性。1)模块化设计包括主控进程、路由器和应用进程,支持高效管理和扩展。2)动态重配置允许在运行时无缝更新配置,适用于CI/CD环境。3)多语言支持通过动态加载语言运行时实现,提升了开发灵活性。4)高性能通过事件驱动模型和异步I/O实现,即使在高并发下也保持高效。5)安全性通过隔离应用进程提高,减少应用间相互影响。

使用NGINX单元:部署和管理应用程序使用NGINX单元:部署和管理应用程序Apr 22, 2025 am 12:06 AM

NGINXUnit可用于部署和管理多种语言的应用。1)安装NGINXUnit。2)配置它以运行不同类型的应用,如Python和PHP。3)利用其动态配置功能进行应用管理。通过这些步骤,你可以高效地部署和管理应用,提升项目效率。

NGINX与Apache:Web服务器的比较分析NGINX与Apache:Web服务器的比较分析Apr 21, 2025 am 12:08 AM

NGINX更适合处理高并发连接,而Apache更适合需要复杂配置和模块扩展的场景。 1.NGINX以高性能和低资源消耗着称,适合高并发。 2.Apache以稳定性和丰富的模块扩展闻名,适合复杂配置需求。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。