vue build打包后只能访问index其他路径无法访问问题

最新推荐文章于 2024-02-05 22:38:26 发布
原创 最新推荐文章于 2024-02-05 22:38:26 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了前端路由中index.js文件中requireAuth属性的设置，该属性控制页面是否需要授权访问。同时，讨论了去除mode:'history'，改用#符号进行URL访问的影响和应用场景。

1、router下index.js 文件中 requireAuth是否是false,

meta: {
   requireAuth:false,
},

2、去掉 mode: "history" 采用#间隔访问

解决vue项目打包后提示图片文件路径错误的问题
08-27
解决 Vue 项目打包后提示图片文件路径错误的问题 在 Vue 项目中，经常会遇到一个问题，即在生产环境下，图片文件路径错误的问题。这主要是因为在生产环境下，文件目录结构发生了变化，从而导致图片文件路径错误。...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了，因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请求地址是这样的。 进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误，就去config文件夹下的index.js中寻找问题。index.js中的bui
vue项目中部分android手机加载打包后的index页面显示空白的问题：uncaught syntaxerror:block-scoped declarations...
zuo-yiran的博客
05-30 2570
在vue项目中遇到加载打包后的index页面，部分android手机会出现空白页面的问题，并且报 Block-scoped declarations (let, const, function, class) not yet supported outside strict mode 的错误，在不报此错误的其他android手机上则没有此空白页面的问题。 提示的错误信息就是在严格模式下不支持这种...
vue 打包路由报错_VUE的history模式下除了index外其他路由404报错解决办法
weixin_32046225的博客
02-22 958
我们先来看下代码：location / {index index.html;root /dist;try_files $uri $uri/ /index.html;}try_files首先会判断他是文件，还是一个目录，结果发现他是文件，与第一个参数 $uri变量匹配。然后去到网站目录下去查找文件是否存在，如果存在直接读取返回。如果不存在直接跳转到第三个参数.现在不明白的是既然跳到了index为什么...
解决宝塔部署vue项目后只能访问index.html页面的问题
奕安的博客
10-12 2826
打开宝塔面板，选择 网站->设置->伪静态 location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.html?s=/$1 last; break; } } 保存就可以了
nginx部署Vue项目只能访问首页，访问其他路径404
qq_38157433的博客
02-05 1370
上述配置中，try_files指令会尝试查找请求的文件，如果文件不存在，就会将请求重定向到/index.html。直接访问其他目录时“https://test/example”，报404。访问网站首页没问题，即网站根目录“http://test.com”，在Nginx配置中添加一个用于处理前端路由的规则。nginx部署Vue，
vue打包后index.html,Vue通过build打包后 打开index.html页面是空白的
weixin_31951989的博客
07-10 2357
最近在build打包vue项目遇到了几个问题，如下：1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：'...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在开发Vue单页面应用时，面对打包后的相对路径与绝对路径问题，主要是因为部署环境的差异和反向代理的需求。通常，默认情况下，Webpack与Vue CLI打包的资源引用使用的是绝对路径，这在本地开发和直接部署到服务器根...
那些年我们在Vue中踩过的坑--打包后发现index.html为空白
weixin_45405395的博客
04-04 657
项目中使用的是vuecli3,项目完成后，执行npm run build打包，发现dist文件夹中index.html运行到网页上是空白的，这个要怎么解决的那？ 原因：是因为打包后，项目文件的路径出现了问题，打包后使用的是绝对路径，绝对根目录路径，所以造成我们的资源无法被正常的解析。 解决办法：要使打包后的文件使用相对路径。 在vuecli3项目中新建vue.config.js文件，配置如下： m...
vue-cli3打包项目发布到tomcat，可正常打开index.html但router配置地址不能正常打开问题处理
guoguo0105的专栏
06-08 855
第一次打包发布vue项目到tomcat，可正常打开index.html，但其他地址（router/index.js下配置的地址）不能打开，报无法找到页面，请教度娘找到的大部分解决方案为修改vue配置文件中publicPath 等类似方式，但都未解决，经过不知多少次查询、尝试，最终找到下面文章问题解决， https://www.jianshu.com/p/55c0b967e1a4 非常感谢文章的作者 最后说明一下问题（解决）根源 在tomcat的webapps/发布项目 下新建文件夹和文件：WEB-I
vue中打包之后访问index.html,Vue通过build打包后 打开index.html页面是空白的
weixin_39711867的博客
06-17 1828
最近在build打包vue项目遇到了几个问题，如下：1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：'...
vue项目中路径中为什么默认有index.html#
热门推荐
Roriring的博客
03-13 1万+
使用vue开发了很多手机app还有微信公众号页面，开始的时候一直都是在以完成项目为目的，没有去思考一些东西，只知道怎么去用，发现成长的太慢了。一段时间没有去开发vue的项目，突然有一天一个同事过来问我项目是不是出错了，搞了半天也没有找到问题，只是访问项目的时候浏览器页面一片空白，于是细心地去看了一下，后来想了一下该准备的东西都准备了，也没有报错是不是路径的问题，后来发现真的是这么回事，在访问的时...
vue项目中打包完成后如何外部链接打开项目中的某个路由页面？
L_eiDigaga的博客
10-21 4272
vue项目开发打包完后 如何从外部链接跳转到项目中的某个路由页面？ 因为vue是单页面应用，所以项目打包完后只有一个index.html文件，然后一切跳转都是有内置的路由来实现，但是当我们从外部链接跳转的时候，，好比这样要直接从外部跳转到paintList这个路由页面，可是这时候会报错404，提示找不到页面，因为你打包完后就只有index.html文件，并没有paintList.html这个文件，...
Vue本地执行build之后打开dist目录下index.html正常访问
BADAO_LIUMANG_QIZHI的博客
07-14 6084
场景 Vue的项目执行 npm run build 后会在本地dist下生成打包后的文件 但是此文件给后端后就能访问， 如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。 这是因为直接在本地访问打开的话，请求资源的url是如上图file://那种开头的路径，需要的是类似于 localhost:8080/这样的在服务器中的访问路径。 经过参考别人的博客，有将vue.config.js中的 publicPath: './', 改为相对路径的，但是在我这里不适用。 ...
vue-cli4打包npm run build过后，通过index.html访问，加载资源失败的问题
易与天行的博客
09-10 1126
在于package.json同级的目录下创建新文件：vue.config.js; 添加下列代码： module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } 位置：
vue打包配置的详细说明【config/index.js的build部份】
ying940718的博客
01-07 4496
index: path.resolve(__dirname, '../dist/index.html') 打包生成的文件路径 __dirname：代码所在路径，字符串格式 assetsRoot: path.resolve(__dirname, '../dist'), 包含应用程序的所有静态资产的根目录（绝对路径） assetsSubDirectory: 'static', 被编译之后的资源...
解决本地nginx部署vue项目只能访问默认页面问题
前端很杂，故名前端杂货铺 —— coderkey
08-08 4094
项目时只能访问默认页面，刷新和跳转页面都会出问题。当作自身的服务访问而找不到，我们修改一下配置文件。页面，而其他页面在访问的时候被。
vue项目打包后怎么访问dist目录下的index.html文件
最新发布
06-19
<think>我们正在处理用户的问题：如何在Vue项目打包后访问dist目录下的index.html文件。根据用户提供的引用内容，我们可以总结出几种方法：方法1：直接打开index.html（但可能遇到空白页面问题）引用[1]提到直接打开dist目录下的index.html可能会出现空白页面，并报错找不到路径。这是因为Vue打包后默认使用绝对路径，而直接打开文件使用的是file协议，导致资源路径不正确。方法2：使用本地服务器（例如使用Flask）引用[2]展示了如何使用Flask框架来部署dist目录。具体步骤：-将dist目录中的文件作为静态资源。-设置Flask的静态文件夹目录和模板目录为dist目录。-创建一个路由，返回index.html。方法3：修改Vue项目的配置（解决空白问题）引用[3]和[4]提供了解决空白页面的方法：-在vue.config.js中设置publicPath为相对路径'./'（引用[3]）。-如果使用VueRouter，需要设置history模式为hash模式（引用[4]），因为hash模式兼容直接打开文件。因此，用户想要访问dist目录下的index.html，有两种主要方式：1.解决路径问题后直接打开（修改配置，使用相对路径和hash路由）。2.使用本地服务器运行。我们分步骤说明：步骤1：修改Vue配置，确保打包后可以直接打开index.html（避免空白）-在项目根目录下创建或修改vue.config.js文件，添加publicPath为'./'。-如果使用了VueRouter，将history模式改为hash模式。步骤2：打包项目-运行命令：npmrunbuild或yarnbuild，生成dist目录。步骤3：访问dist目录下的index.html-方法A：直接双击打开（此时由于配置了相对路径和hash路由，应该可以正常显示）。-方法B：使用本地Web服务器（例如Python的http.server模块、Node的serve等）或者使用Flask等框架部署。下面我们详细说明两种访问方式的具体操作。方式一：直接打开（需要先修改配置）1.配置vue.config.js：```javascriptmodule.exports={publicPath:'./',//关键：使用相对路径//其他配置...}```2.如果使用VueRouter，修改路由模式：```javascriptconstrouter=createRouter({//history:createWebHistory(),//改为使用createWebHashHistoryhistory:createWebHashHistory(),routes})```3.打包：npmrunbuild4.进入dist目录，双击index.html即可。方式二：使用本地服务器（无需修改路由模式，但需要服务器环境）1.打包：npmrunbuild2.进入dist目录，然后根据你使用的工具启动服务器。使用Python内置HTTP服务器（Python3）：在dist目录下执行命令：python-mhttp.server[端口号，默认8000]然后浏览器访问：http://localhost:8000使用Node的serve（需要全局安装serve）：安装：npminstall-gserve在dist目录下执行：serve-s然后根据提示的地址访问（默认http://localhost:5000）3.使用Flask（如引用[2]）：将dist目录放在Flask项目下，然后编写一个简单的Flask应用：```pythonfromflaskimportFlask,render_templateapp=Flask(__name__,static_folder='dist',template_folder='dist')@app.route('/')defindex():returnrender_template('index.html')if__name__=='__main__':app.run()```运行该Flask应用，访问http://localhost:5000。注意：使用服务器方式时，如果Vue项目配置了publicPath为'/'（默认值）也是可以的，因为服务器会处理根路径。总结：推荐使用本地服务器方式，因为更接近生产环境。如果只是本地查看，可以按照方式一修改配置后直接打开。根据以上内容，我们生成相关问题。</think>### 访问Vue打包后dist目录中index.html的方法 #### 方法1：直接本地打开（需配置路径） 1. **修改Vue配置** 在`vue.config.js`中设置`publicPath`为相对路径： ```javascript module.exports = { publicPath: './', // 关键配置 outputDir: 'dist' } ``` 2. **调整路由模式** 若使用Vue Router，需改用Hash模式： ```javascript import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ history: createWebHashHistory(), // 替换createWebHistory routes: [...] }) ``` 3. **打包与访问** ```bash npm run build ``` 双击`dist/index.html`即可打开（仅限本地测试）[^3][^4]。 #### 方法2：通过本地服务器运行（推荐） 1. **Python内置服务器** ```bash cd dist python -m http.server 8000 ``` 访问：`http://localhost:8000` 2. **Node.js服务器** 安装serve包： ```bash npm install -g serve serve -s dist ``` 访问：`http://localhost:3000`[^1] #### 方法3：集成Flask后端 1. **目录结构** ``` project/ ├── app.py └── dist/ (Vue打包文件) ``` 2. **Flask配置** ```python from flask import Flask, render_template app = Flask(__name__, static_folder='./dist', template_folder='./dist') @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(port=5000) ``` 访问：`http://localhost:5000`[^2] --- ### 常见问题解决 | 问题现象 | 解决方案 | |---------|----------| | 空白页面 | 检查`publicPath`是否为`./` | | 资源404 | 确认路由使用Hash模式 | | 控制台路径错误 | 避免绝对路径`/static/`，改用相对路径 | > **关键提示**：生产环境务必通过Web服务器（Nginx/Apache）部署，直接打开HTML文件仅适用于本地测试[^1][^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值