vite.config.ts常规配置(publicPath)

这篇具有很好参考价值的文章主要介绍了vite.config.ts常规配置(publicPath)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

@vue.confing.js中的publicPath属性变为base属性
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’ // 单文件组件支持
/**文章来源地址https://www.toymoban.com/news/detail-440977.html

  • Vue 3 单文件组件支持:@vitejs/plugin-vue
  • Vue 3 JSX 支持:@vitejs/plugin-vue-jsx
  • Vue 2.7 支持:vitejs/vite-plugin-vue2
  • Vue <2.7 的支持:underfin/vite-plugin-vue2
    /
    import AutoImport from ‘unplugin-auto-import/vite’ // 使用后可以不手动引入ref reactive onMounted这些api
    import Components from ‘unplugin-vue-components/vite’ // vite的按需引入自定义组件库
    // import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’ // ElementPlus
    import { NaiveUiResolver } from ‘unplugin-vue-components/resolvers’ // NaiveUi组件
    import path from “path”; // 和NodeJS “path”模块一样
    /
    *
  • 自定义组件自动引入 unplugin-vue-components
  • element-plus 组件自动引入 unplugin-vue-components
  • vue3等插件 hooks 自动引入 unplugin-auto-import/vite
  • message, notification 等引入样式自动引入 vite-plugin-style-import
    /
    export default defineConfig({
    // 需要用到的插件数组。Falsy 虚值的插件将被忽略,插件数组将被扁平化(flatten)
    plugins: [
    vue(),
    AutoImport({
    resolvers: [NaiveUiResolver()],
    imports: [
    “vue”,
    {
    “naive-ui”: [
    “useD

到了这里,关于vite.config.ts常规配置(publicPath)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(67)
  • vite.config.ts中的配置与打包

    vite打包后发现所有的css,js,png等都在static文件夹内,配置vite.config.js实现分割代码并存于不同的文件中 vite.config.ts中配置build

    2024年02月16日
    浏览(21)
  • vite.config.js配置-解决跨域问题,以及@vitejs/plugin-vue等报错

    在配置的过程中踩了很多坑,还是太菜,有些东西弄不明白什么意思。 运行项目时的报错可直接到最下面看vite.config.js文件的注释 目前项目用到的模块并不多,package.json文件如下 其实主要还是这些模块的版本兼容问题 vite的版本最开始是1.0.0,后面很多地方搞不下去了才卸载

    2023年04月08日
    浏览(33)
  • vite+vue3运行项目报错failed to load config from ../vite.config.ts / Cannot find module ‘node:path‘

    运行vite+vue3项目时报错: failed to load config from …/vite.config.ts error when starting dev server: Error: Cannot find module ‘node:path’ Require stack: /Users/list/Downloads/Admin-master/node_modules/vite/dist/node-cjs/publicUtils.cjs 百度了发现是node版本不够,于是去升级node到16版本 1.清除npm缓存: 2.安装node版本管

    2024年02月05日
    浏览(44)
  • vite.config.js详细配置。

    Vue3+vite vite和webpack区别? 1.vite服务器启动速度比webpack快,由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,

    2024年01月16日
    浏览(26)
  • React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)

    在 Vue 项目当中,可以使用  @  来表示  src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用

    2024年02月09日
    浏览(34)
  • 【Vue3+Ts+Vite】配置滚动条样式

    2024年02月15日
    浏览(30)
  • vite.config.ts 自动导入静态资源 或 cdn资源

    效果

    2024年02月10日
    浏览(32)
  • vue3-ts-vite:vue 项目 配置 多页面应用

    一、Vue项目,什么是多页面应用 Vue是一种单页面应用程序(SPA)框架,这意味着Vue应用程序通常只有一个HTML页面,而在该页面上进行动态的内容更改,而不是每次都加载新的HTML页面。  但是,有时候我们需要在同一应用程序中拥有多个独立的页面,每个页面都可以单独处理

    2024年02月14日
    浏览(31)
  • vue3+Vite+TS项目,配置ESlint和Prettier

    实操过的有两种方式 1.vue脚手架 2.vite(推荐,也是尤大大团队研发) 具体怎么新建一个vue3项目就不多讲了,可以按照官方文档来 创建后的文件目录长这样 多提一句,vite也会随着时间不断迭代,后续项目结构可能还会发生变化,当前使用的vue版本 和vite版本也一并贴出来 下

    2024年04月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包