vue3+vite前端本地怎么访问public下的文件,vite配置的根路径为‘/',怎么访问才能不会跳转到’/login‘
时间: 2024-02-09 21:12:14 浏览: 29
如果你的文件位于public文件夹下,你可以使用相对路径访问它们。例如,如果你的文件夹结构如下:
```
public/
images/
logo.png
```
你可以在Vue组件中使用以下方式引用它:
```html
<template>
<div>
<img :src="require('@/images/logo.png')" alt="Logo">
</div>
</template>
```
这里的`@`是你在vite配置中指定的别名,对应的是根路径`/`。使用`require`函数将图片作为模块引入。
如果你的public文件夹中有一个名为`login.html`的文件,你可以使用相对路径访问它,例如:
```html
<template>
<div>
<a :href="`${process.env.BASE_URL}login.html`">Login</a>
</div>
</template>
```
这里的`process.env.BASE_URL`是你在vite配置中指定的根路径。如果你不想让它跳转到`/login`,你需要确保它的路径正确。
相关问题
vue3+ts+vite项目到指定访问路径
如果你想将Vue 3 + TypeScript + Vite项目部署到指定的访问路径,可以按照以下步骤进行配置:
1. 打开`vite.config.ts`文件。
2. 在`defineConfig`函数中添加一个`base`选项,指定你的访问路径。例如,如果你想将项目部署到`/myapp/`路径下,可以设置如下:
```typescript
export default defineConfig({
base: '/myapp/',
plugins: [vue()],
});
```
3. 保存文件并重新运行项目。现在,你的项目将会在指定的访问路径下进行部署。
请注意,如果你使用的是开发服务器(`npm run dev`),访问路径将会自动添加到本地开发服务器的URL中。对于生产环境打包(`npm run build`),你需要确保在部署时将项目放置在正确的路径下。
希望这些步骤能够帮助到你!如果你还有其他问题,请继续提问。
Vue3+vite+ts 本地访问正式服务器接口
如果您想在本地开发环境中访问正式服务器的接口,您需要确保您的服务器已经开启了跨域访问(CORS)权限。如果您的服务器没有开启跨域访问权限,那么您将无法从本地访问服务器接口。
在您的 Vue3+vite+ts 项目中,您可以使用 axios 库来发起 HTTP 请求。为了在本地开发环境中访问正式服务器接口,您需要将 axios 的 baseURL 配置为正式服务器的地址。例如:
```javascript
import axios from 'axios'
const api = axios.create({
baseURL: 'http://your-server-url.com'
})
export default api
```
然后,您就可以在您的 Vue 组件中使用该 API 对象来发起请求了。例如:
```javascript
import api from './api'
export default {
async mounted() {
const response = await api.get('/some-api-endpoint')
console.log(response.data)
}
}
```
请注意,如果您的服务器没有开启跨域访问权限,您可能会遇到类似于 “Access to XMLHttpRequest at 'http://your-server-url.com/some-api-endpoint' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” 的错误。如果遇到这种情况,您需要在服务器端配置允许跨域访问。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)