服务器之家:专注于服务器技术及软件下载分享
分类导航

云服务器|WEB服务器|FTP服务器|邮件服务器|虚拟服务器|服务器安全|DNS服务器|服务器知识|Nginx|

服务器之家 - 服务器技术 - Nginx - nginx 部署 vue 项目找不到js css文件的解决方法

nginx 部署 vue 项目找不到js css文件的解决方法

2019-09-20 22:48stu_yiliang Nginx

这篇文章主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

nginx 部署 vue 项目找不到js css文件的解决方法

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

[email protected]

[email protected] 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容:

...
module.exports = {
 baseUrl: isProd
  ? '/baseXXX/'
  : '/',
  ....
}

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

[email protected]

针对 非 [email protected] 生成的项目,你如果不关心 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文件的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

延伸 · 阅读

精彩推荐
  • Nginx深入分析nginx+php-fpm服务HTTP状态码502

    深入分析nginx+php-fpm服务HTTP状态码502

    这篇文章主要介绍了深入分析nginx+php-fpm服务HTTP状态码502,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 ...

    leezhxing2552019-09-20
  • NginxNginx定时切割日志实现详解

    Nginx定时切割日志实现详解

    这篇文章主要介绍了Nginx定时切割日志详解,Nginx日志默认情况下写入到一个文件中,为了区分各个域下的日志,我们一般会分开存储。即时这样,文件也会变的越来越大,非常不方便查看分析。下面来聊聊以日期来分隔Nginx日志,需...

    小柒2532019-09-20
  • Nginxwelcome to nginx是什么意思

    welcome to nginx是什么意思

    welcome to nginx ,欢迎来到 nginx 的世界,如果你是一个专业网站建设人员你可能接触最多的就是阿帕奇apache,现在更多的网站建设人员都开始使用 LINUX 服务器,那么 LINUX 服务器更好的会使用到nginx,那么什么是 nginx,nginx 有什么用,...

    php中文网1432019-09-20
  • Nginxnginx配置不生效,页面一直是默认页面welcome to nginx的解决办法

    nginx配置不生效,页面一直是默认页面welcome to nginx的解决办法

    ubuntu下nginx的配置文件所在目录: /etc/nginx 我们对nginx的配置主要写在nginx.conf文件里,这个目录下还有conf.d和sites-enabled两个文件夹,里面为默认的配置文件。 相应的,在配置nginx,编辑nginx.conf文件时,需要把这两行注释掉,否则...

    CSDN2502019-09-20
  • Nginxnginx 部署 vue 项目找不到js css文件的解决方法

    nginx 部署 vue 项目找不到js css文件的解决方法

    这篇文章主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 ...

    stu_yiliang4452019-09-20
  • NginxLinux中安装Nginx的正确步骤

    Linux中安装Nginx的正确步骤

    这篇文章主要给大家介绍了关于在Linux中安装Nginx的正确步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 ...

    神易风4732019-09-20
  • NginxNginx服务器实现通过ip和user_gent限制访问的方法分析

    Nginx服务器实现通过ip和user_gent限制访问的方法分析

    这篇文章主要介绍了Nginx服务器实现通过ip和user_gent限制访问的方法,结合实例形式分析了Nginx通过限制ip和user_gent限制访问来过滤DDOS攻击的相关操作技巧,需要的朋友可以参考下 ...

    koastal3492019-09-20
  • Nginxnginx解决跨域问题的实例方法

    nginx解决跨域问题的实例方法

    在本篇文章里小编给各位分享了关于nginx怎么解决跨域问题的方法和实例代码,需要的朋友们参考下。 ...

    laozhang3032019-09-20
北京塞车全天计划精准版