vue项目打包后部署nginx,找不到页面

最新推荐文章于 2024-10-10 08:00:00 发布

yxy3511

最新推荐文章于 2024-10-10 08:00:00 发布

阅读量3.3k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yxyy3511/article/details/88813428

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

方式一：(mode:history)

webpack.base.conf.js

assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', // 注意是绝对路径

nginx 配置文件

http{

server {

location / {

try_files $uri $uri/ /index.html; // 加上这行配置

}

}

}

方式二：（mode:hash)

webpack.base.conf.js

assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 注意是相对路径

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yxy3511

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...

weixin_39768917的博客

08-02

1457

"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...

使用Nginx部署前端静态资源无法访问的问题

lixuanfeng blog

06-04

5355

server { listen 80; server_name www.xxxx.xxx; charset utf-8,gbk; client_max_body_size 100m; gzip on; gzip_http_version 1.1; gzip_comp_level 4; gzip_min_length 1000; gzip_types text/plain application/javascript text.

参与评论您还未登录，请先登录后发表或查看评论

JavaWeb——Vue：打包部署（Nginx、目录介绍、部署及启动、访问）

最新发布

li13437542099的博客

10-10

2139

解压完毕后，介绍一下 Nginx 的安装目录。主要有四个目录：conf用来保存 Nginx 的配置文件；html是用来存放静态资源文件的，如果要部署一些静态资源，比如 CSS 文件，就可以将这些文件放在这个目录下；logs存放的是 Nginx 运行的时候所产生的一些日志文件；临时文件的存放目录temp；最后还有一个 nginx.exe ，这个是 Nginx 的可执行文件，启动 Nginx 就要通过这个来启动。

vue-cli打包到部署到nginx服务器

weixin_34192816的博客

07-06

2077

最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现 no "NODE ENV"是我打包时没有指定打包到哪个环境正确打包是 npm run build:prod 2.关于vue-router 中...

vue工程打包发布nginx 找不到路径_Vue框架的最佳实践与源码！

weixin_39605296的博客

12-12

342

Vue，React这样的框架可以说是现在前端的必备技能，一个刚入门两三个月的前端都是要会Vue的，现在Vue3.0都已经发布了，使用的人群变得更多了，越来越多的人开始想去了解它。Vue这么受大众推崇，那么大家有没有想过一个问题？Vue，React这样的框架已经是基本功，我们有什么办法能运用得比别人厉害呢？能够独立用Vue写一个项目其实只是入了一个门，在技术快速发展的背景下，想成为一个真的...

nginx 部署vue3项目动态路由获取不到的

weixin_42837989的博客

06-14

452

服务器上异步加载组件可以用Promise解决。

404 not found nginx（dist打包后，刷新和跳转都是404 not found nginx的问题）解决方案（打包发布在服务器）

weixin_43465508的博客

09-08

4321

try_files 更加可靠，首先会查找"$uri"下的这个文件，如果不存在会查找$uri/,如果还不存在就会重定向到 /index.html页面。如果最后参数写错了，就会导致500的服务器错误。index 就是根目录，也就是只识别“/”结尾的，输入不存在或者刷新页面的路径就直接报nginx的404了，而不会重定向到index.html。vue + nginx的配置， vue路由必须先加载 index.html 或者XX.js 才能识别到路由。配置方面不介绍了，主要问题是因为没有加这句话。

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

09-29

综上所述，解决nginx部署Vue项目时找不到js和css文件的问题，关键在于正确设置Webpack打包时资源引用的基础路径。对于vue-cli@3，你需要在vue.config.js中配置baseUrl；而对于vue-cli@2，则需要修改config/index.js...

Vue打包部署到Nginx时,css样式不生效的解决方式

10-15

总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...

Vue3项目打包后部署到服务器请求不到后台接口解决方法

10-15

在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...

nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx

2401_84437170的博客

04-28

589

server {# 自定义监听端口# 浏览器访问域名serverserverroot dist;

在IIS服务器上，部署vue打包的单页面应用

weixin_30377461的博客

06-18

250

在IIS上面部署VUE项目文件后，访问地址链接，进入到非 / 路由后，刷新当前页面，会出现404找不到。这是由于服务端URL匹配不到相应的路由资源。其实，vue-router的官方文档上，已经教给我们解决的办法了。查看官方文档：vue-router 后端配置例子这里，找到IIS教程：这里需要补充的是，如果你的IIS上面没有安装过 application request routi...

vue 打包放服务器，css样式不显示

yudldl的博客

09-27

6710

vue 打包以后，在本地起服务能够访问，但是当放到服务器的时候，得到下面的提示信息，意思是已经下载到了表单样式，但是表单的MIME type 是流，我们知道表单样式的唯一的MIME类型是text/css，所以的的解决办法是需要在服务器设置表单样式的MIME类型为text/css就可以。在搜集资料的过程发现，另外一种情况也会出现css效果无法呈现，报如下这个提示信息， Resou...

vue-cli 3 打包部署到nginx不显示界面

lucky_oak的博客

12-05

1201

在项目根目录新建文件vue.config.js 添加一下代码： module.exports = { publicPath: './' }

vue打包之后的项目在nginx的部署404,以及无法跳转路由问题

qq_39330397的博客

06-29

6874

常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。

vue项目部署到nginx服务器，静态资源不能加载问题的处理

qq_27474555的博客

11-06

6845

1、现象部署到服务器，提示以下错误： GET http:/static/css/static/fonts/element-icons.535877f.woff net::ERR_ABORTED 404 (Not Found)2、原因路径问题，开发环境系统会自动配置，而部署环境可能需要用户干预；3、解决办法 build/utils.js文件中添加publicPath路径，修改前： if (opt...

Vue3项目打包后资源找不到

LueLueLue77的博客

06-10

7107

vue项目打包后放到服务器上资源找不到，解决办法

原始Vue+webpack打包后部署nginx报404

qq_38015462的博客

06-01

2701

项目npm run build 之后直接用nginx做为服务器访问静态页面有下列错误检索页面发现也就是说路径为绝对路径。更改路径的方式在目录中index文件将其更改为相对路径即可或者直接去除“/”也可。然后重新npm run build即可成功访问...

Vue 打包程序部署到Nginx 点击跳转404

LetCode的专栏

02-03

4466

Vue 打包程序部署到Nginx 点击跳转404

vue项目打包部署到nginx

04-28

好的，针对您的问题，我可以给您提供以下步骤： 1. 首先，您需要在本地使用命令 `npm run build` 打包您的 Vue 项目，这将生成一个 `dist` 目录，包含了静态资源和打包好的应用程序代码。 2. 将 `dist` 目录下的所有文件上传到您的服务器上。您可以使用 FTP 工具或者其他文件传输工具进行上传。 3. 在服务器上安装 Nginx，并且配置 Nginx 的虚拟主机。打开 Nginx 的配置文件，一般位于 `/etc/nginx/nginx.conf`，添加以下内容： ``` server { listen 80; server_name yourdomain.com; location / { root /path/to/your/dist; index index.html; try_files $uri $uri/ /index.html; } } ``` 在上面的配置中，将 `yourdomain.com` 替换为您的域名或者 IP 地址，将 `/path/to/your/dist` 替换为您上传的 `dist` 目录的路径。 4. 保存配置文件，然后重启 Nginx 服务，命令为 `sudo service nginx restart`。 5. 测试您的应用程序是否可以正常访问。在浏览器中输入您的域名或者 IP 地址，应该能够看到您的 Vue 应用程序。希望上述步骤能够帮到您，如果您有任何问题或者需要更详细的解释，可以随时问我。