vue修改server路径带dist问题

最新推荐文章于 2024-08-22 17:58:57 发布
最新推荐文章于 2024-08-22 17:58:57 发布
阅读量671 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/alistring/article/details/117377004
版权

webpack server开发vue时会发现url会带上dist，例如：http://localhost:8080/dist/index

我们可以打开vue.config.js文件，然后把publicPath的值改成 / 后重新编译重启
npm run build
npm run serve
在这里插入图片描述
Url中的dist已经没有了
在这里插入图片描述
在这里插入图片描述

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
**My Coding Family**
03-24 9787
零基础带你入门Vue项目打包部署到Linux服务器，一条龙服务，只为不远千里把你教会。
dist-server:启动静态服务器，这将减少Chrome的审核工作
05-10
远程服务器 一些现代Web应用程序除具有CDN的速度外，还具有CDN的以下属性，以最大程度地减少加载时间。 所有静态资产均已gzip 所有静态资产都永久保留在浏览器的缓存中（假设它们的文件名已正确散列，也称为缓存无效） 已正确发出HTTP 304，以指示自上次请求以来尚未修改资源 dist-server启动一个服务器，该服务器公开端口8000当前工作目录中的所有文件，并满足上述条件。 $ npm install -g dist-server $ dist-server Server running at http://localhost:8000 通过dist-server托管文件将使Chrome的审核工作不再像Enable gzip compression和Leverage browser caching ！
vue项目导入swiper插件之dist路径坑
认定的总要想办法去完成。
07-17 3781
在项目中引入swiper插件时，发现项目中报错出现路径错误，又再一次报着不解的疑惑取node_modules找到swiper文件夹找找是否有dist文件夹。 果然没有发现dist文件夹，这跟之前使用swiper遇到的情况咋不一样呢？我分析的原因是：因为下载版本不同的原因所造成的，之前下载swiper是带有dist文件夹的，那么大家可以在使用npm下载时指定版本号例如： npm install swiper@5.x.x --save-dev 下载该swiper插件。 那么在这里我解决的办法是： 创建di
前端vue项目使用dist文件调试说明（附安装包）
陈建华的博客
06-17 1701
前端vue项目使用本地dist文件调试说明（附安装包）
运行vue项目打包后的dist文件夹
诸事顺利
04-30 769
npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
webpack打包vue项目之后生成的dist文件本地运行
qq_37214137的博客
03-14 3076
本地测试打包文件
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
然而，直接通过浏览器打开 `dist/index.html` 无法正常工作，因为 Vue 项目依赖的 JavaScript 和 CSS 文件是通过相对路径引用的，且需要在服务器环境下运行，所以直接打开会遇到错误。 为了运行打包后的 Vue 项目，...
修改vue项目到服务器端渲染,vue-server-renderer实现vue项目改造服务端渲染
weixin_31556767的博客
08-04 1329
这是一篇教程，从创建项目到改造项目vue-cli创建一个项目在放你做demo的地方，创建一个项目vue create vue-ssr// 如果你安装了vue-cli4，选择vue2的版本，以下的改进过程是按vue2来做的经过漫长的等待，下载好文件开始我们的改造之路文件目录进入vue-ssr文件夹，使用命令vue ui把vue-router装上先安装几个依赖插件// 安不上用cnpm，yarn，np...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
对于Vue CLI 2，需要修改config/index.js文件中的assetPublicPath的路径为相对路径“./”。对于Vue CLI 3，则需要在项目的根目录下创建一个vue.config.js文件，并设置publicPath和assetsDir等选项，以及通过修改路由...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
vue3.0版本怎么修改服务器路径,@vue/cli 3.0 下通过npm命令切换不同服务器地址
weixin_39849287的博客
08-04 628
在使用vue时，有一种情况比较麻烦，就是这个前端项目可能不止一个服务器地址，那么每个服务器地址都得打包一次，并且需要手动修改服务器接口地址。首先知道可以使用环境变量方式将不同配置载入到不同模式下。@vue/cli在默认情况下是没有vue.config.js文件的，通过使用vue ui方式让vue自己创建好或者直接在根目录创建。环境变量配置process.env.npm_config_argv 这个...
http-server -运行打包好的前端dist包
热门推荐
来一颗砂糖橘
06-02 1万+
http-server -运行打包好的前端dist包
vue dist tomcat部署 + nginx
温故而知新，可以为师矣。
01-31 6612
前言 第一次接外包。一个产品，一个前端，一个后端，一个UI。采用前后端分离开发，我主要负责写接口，服务器发布。 开发环境 IDEA Win7 项目技术 Spring + boot + shiro + vue 服务器 腾讯云 Ubuntu 部署vue 1.首先：将前端项目打包成静态文件【dist.rar】。 2.服务器准备一个tomcat 修改tomcat端口为8085 /conf/ser...
Vue项目从打包到部署到云服务器上（踩了不少坑）
qq_41841048的博客
02-23 9922
你的Vue项目终于暂时告一段落了，但是我们都知道开发环境和生产环境的区别。我们平时都是在本地做开发，每次打开都是localhost:8080的，如果你想将它变成你的小网站呢？ 首先你看这篇博客必须要做的事情是： ①你有了一个可以正常运行的Vue项目 ②你有了服务器+域名（没有就去买，腾讯云） 我所访问的数据接口是自己写的，部署在本地服务器那里的 Node.js+Express+MongoDB（一会...
本地运行vue打包后的dist 文件
weixin_39458031的博客
08-11 978
build 之后会生成一个dist目录。打包完命令行是不是这样提示了： Build complete. Tip: built files are meant to be served over an HTTP server. //打包的文件要在http server下运行 Opening index.html over file:// won’t work. //直接打开这个文件不会生效 所以呢， dist目录里的index.html 和static（默认资源文件）一起放在一个server（如tomcat，
前端错误总结
qq_57919779的博客
11-24 3055
前端错误总结
vue项目 dist文件本地部署、http-server网页服务
Li8L9xF的博客
09-29 2743
http-server ：web服务器。vue打包本地部署。本地测试局域网下载app
前端每次保存编译都会产生一个dist文件
混世小妲己
12-16 1958
原创：https://blog.youkuaiyun.com/weixin_36352085/article/details/116495756 每次都会生成一个dist文件夹 原因就是vscode开启了Compile Hero，只要关闭就可以了。
vue 中 dist文件夹静态是什么意思（distribution）
chaoren499的专栏
08-22 1044
在Vue项目中，将源代码经过编译、压缩等处理后打包为dist目录，是为了方便将项目部署到生产环境中。总之，将Vue项目打包为dist目录是为了优化静态资源文件、提高网页加载速度，并方便部署到生产环境中。dist目录的命名方式可以根据项目需要自行定义，通常是为了表达该目录所包含的是已经经过处理的最终版本的文件。具体来说，dist目录包含了经过压缩、优化、合并等处理后的HTML、CSS、JavaScript等静态资源文件。方便部署：将整个dist目录复制到服务器上，即可直接访问网站，方便部署和发布。
如何运行别人的vue项目 被打包成dist
最新发布
03-30
### 如何部署和运行 Vue 项目生成的 `dist` 文件夹 #### 部署流程概述 当通过执行 `npm run build` 命令成功构建 Vue 项目后，会在项目根目录下生成一个名为 `dist` 的文件夹。该文件夹包含了经过优化、压缩后的静态资源文件（HTML、CSS 和 JavaScript），这些文件可以直接用于生产环境部署。 为了使已打包好的 Vue 应用能够正常访问并运行，需要将其部署到支持静态文件服务的环境中。以下是具体方法： --- #### 使用本地 HTTP Server 测试 可以通过简单的 HTTP 服务器来测试 `dist` 文件夹中的内容是否可以正常加载。例如，在 Node.js 环境中安装 http-server 工具： ```bash npm install -g http-server cd path/to/your/dist/folder http-server . ``` 启动完成后，默认可以在浏览器地址栏输入 `http://localhost:8080` 来查看应用效果[^1]。 --- #### 将 `dist` 文件夹上传至远程服务器 对于正式上线的需求，通常需要将整个 `dist` 文件夹及其内部所有文件上传到目标服务器上。常见的做法如下： 1. **FTP/SFTP 协议传输** 利用 FTP 或 SFTP 客户端工具（如 FileZilla）连接到服务器，并把 `dist` 文件夹内的全部文件复制粘贴到指定路径。 2. **Git/GitHub Pages 发布** 如果使用 GitHub 托管代码仓库，也可以借助 GitHub Actions 自动化发布功能或者手动提交到 gh-pages 分支实现线上展示[^3]。 3. **CDN 存储分发** 对于大规模流量场景，建议采用 CDN 提供商的服务存储前端资产文件，从而减轻源站压力的同时提高用户体验速度。 无论采取哪种方式，请务必确认 Web 服务器已经正确配置好 MIME 类型以及跨域资源共享策略(CORS)，以便客户端能顺利请求所需数据。 --- #### 修改入口 HTML 中相对链接设置 有时由于开发阶段使用的路由模式不同(比如 history mode vs hashbang mode), 导致实际部署时页面刷新会出现404错误等问题。此时就需要调整 Nginx/Apache 等 web server 的 rewrite rules ，让所有的未匹配 URI 请求都重定向回 index.html 页面处理[^2]: ##### Apache .htaccess 示例 ```apacheconf <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` ##### Nginx location block 示例 ```nginx location / { try_files $uri $uri/ /index.html; } ``` 上述更改可确保即使用户直接跳转某个子路径也不会因找不到对应物理文件而失败。 --- #### 注意事项 - 若原工程依赖外部 API 接口调用，则记得同步更新 baseURL 地址指向新的后台服务位置； - 检查图片字体图标等素材引用路径是否有误； - 开启 Gzip/Brotli 数据流压缩技术进一步减少网络传输体积提升性能表现。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值