使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

hykeda2年前Vue3208

vue打包生成dist文件夹,然后在本地nginx部署vue项目时只能访问默认页面,刷新和跳转页面都会出问题。

f341a9addb164e22aee5e4d91dae2cca.png

原因:

只访问了dist文件下的 index.html、index.htm页面,而其他页面在访问的时候被nginx当作自身的服务访问而找不到,我们修改一下配置文件。


方法:

添加上 try_files $uri $uri/ /index.html;

location / {
        try_files $uri $uri/ /index.html; # 用于支持Vue-router的history模式
    }


相关文章

vite+vue 插件/组件集合

自动引入插件:https://github.com/antfu/unplugin-auto-importvue的按需组件自动导入:https://github.com/antfu/unplugin-v...

在html5中使用Vue3,并且使用组件形式

有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:1)引入Vue,并创建Vue实例在官网上,已经讲得很清楚了,我们可以这样使用&nbs...

vite+vue3项目中js方法调用

这这里一创建一个axios接口demo为例:首先安装axios,打开官方GitHub:https://github.com/axios/axios或者访问中文网站:https://www.axios-...

Vue3 Pinia持久化存储

一、Pinia持久化存储二、使用步骤1.安装插件代码如下(示例):npm i pinia-plugin-persist --save2.store/index.js代码如...

vue中的h函数使用

一、参数设置h函数接收三个参数。第一个参数:,可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。第二个参数:{ Object } Props,与attributes和props,以...

useRoute,userRouter的用法

 import { useRoute, useRouter } from 'vue-router'; 这里的useRoute是获取传递的变量:const route...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。