vue3 vite热更新后静态资源目录就会取路由地址
时间: 2023-07-28 14:09:54 浏览: 47
Vue3的热更新功能是由vite提供的,它会在本地启动一个开发服务器,并且会实时监测文件变化,自动更新页面,这个过程中确实会有一些问题。
如果您的静态资源目录设置不正确,可能会导致热更新后静态资源目录会取路由地址。解决这个问题可以尝试以下方法:
1. 确认静态资源目录是否正确设置。
在vite.config.js中设置静态资源目录:
```javascript
export default {
...
build: {
assetsDir: 'static',
...
}
}
```
2. 禁用热更新功能。
如果您认为这个问题是由热更新功能引起的,可以尝试禁用热更新功能,然后重新启动开发服务器。在vite.config.js中设置:
```javascript
export default {
...
server: {
hmr: false,
...
},
...
}
```
这样就可以禁用热更新功能了。
希望以上方法能够帮助您解决问题。
相关问题
vue3热更新后静态资源目录就会取路由地址
在 Vue3 中,热更新是通过 WebpackDevServer 实现的,而静态资源目录的路径是在 Webpack 配置中指定的。如果你的静态资源目录路径取决于路由地址,那么可能需要在 Webpack 配置中动态设置静态资源目录路径。
可以使用 `publicPath` 配置项来指定静态资源的基础路径。在 Vue3 中,可以通过 `webpack-chain` 库来修改 Webpack 配置。具体的操作方式如下:
```js
// vue.config.js
const { defineConfig } = require('vite')
const vueJsx = require('@vitejs/plugin-vue-jsx')
module.exports = defineConfig({
plugins: [vueJsx()],
chainWebpack: config => {
// 获取当前的路由地址
const routerPath = process.env.VUE_APP_ROUTER_PATH || '/'
// 设置静态资源目录路径
config.output.publicPath(routerPath)
}
})
```
在上面的代码中,我们获取了当前的路由地址,并将其作为静态资源目录的基础路径。注意,这里使用了 `process.env.VUE_APP_ROUTER_PATH` 来获取路由地址,需要在项目中先设置好该环境变量。
这样,在热更新时,WebpackDevServer 就会动态地将静态资源目录路径设置为当前路由地址,从而实现热更新时静态资源能够正确加载的效果。
vue3 vite 文件目录
Vue3并没有强制规定文件目录结构,开发者可以按照自己的喜好来组织代码。然而,通常情况下,我们会按照以下方式组织文件目录:
```
├── public
│ ├── favicon.ico
├── src
│ ├── assets
│ ├── components
│ ├── router
│ ├── store
│ ├── views
│ ├── App.vue
│ └── main.js
├── index.html
├── README.md
├── tsconfig.json
├── vite.config.ts
└── package.json
```
在这个结构中,`public`目录用于存放静态文件,如`index.html`文件和图片等。`src`目录用于存放源代码,包括`assets`目录用于存放静态资源,如图片、字体等,`components`目录用于存放组件,`router`目录用于存放路由文件,`store`目录用于存放Vuex相关文件,`views`目录用于存放页面组件,`App.vue`文件是应用程序的根组件,`main.js`文件是应用程序的入口文件。
此外,还有一些其他文件,如`index.html`是应用程序的主页面,`README.md`是说明文件,`tsconfig.json`是TypeScript的配置文件,`vite.config.ts`是Vite的配置文件。
需要注意的是,这只是一个常见的文件目录结构示例,您可以根据自己的需求进行调整。同时,在使用Vue CLI创建项目时,也可以选择不同的preset来生成不同的文件目录结构。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>