vue3 + element-plus + vite 注意事项

最新推荐文章于 2025-03-11 14:22:37 发布

hello，是翠花呀

最新推荐文章于 2025-03-11 14:22:37 发布

阅读量4.6k

点赞数

分类专栏： Vue 文章标签： vue vue3 elementui element plus

本文链接：https://blog.youkuaiyun.com/qq_26769677/article/details/114505341

版权

Vue 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了在使用vue3、element-plus和vite进行开发时可能遇到的问题及其解决方案，包括Uncaught SyntaxError错误、浏览器刷新变空白、路径别名设置、分目录打包、跨域配置等，帮助开发者顺利进行项目构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3 + element-plus + vite 注意事项

vue3发布以来很多ui库都做了跟进，比如vant、ant、element…各个项目还在探索阶段，所以如果使用的话得做好迎接各个库bug的准备~

element-plus

原element库很久很久没有人维护了，不知道这个element-plus会维护多久。

安装啥的步骤element-plus网站都有。

需要注意的是，按需引用时记得引入样式文件import 'element-plus/lib/theme-chalk/index.css';

按需引入的全局size设置：app.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 }。

Uncaught SyntaxError: Cannot use import statement outside a module

<script type="module" src="/src/main.ts"></script>

根目录下的index.html文件type="module"这里不能去掉。因为vue3使用了浏览器原生的模块导入导出方式，

Failed to load module script: The server responded with a non-JavaScript MIME type …

查看控制台Application中Frames，js文件都被返回成html文件。
查看nginx是否配置有误，比如静态文件为二级目录访问www.abc.com/app，location需设置二级目录。

进入网站正常访问，刷新页面就变空白

结合项目是不是二级目录访问，vite.config.ts文件中：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: './',
  publicDir: 'app'
  //....
  })

执行build命令时"build": "cross-env VUE_APP_ENV=production vite build --base=/app/"原命令加上--base=/app/就可以基于二级目录app打包，打包后查看dist文件夹index.html文件可以看到已经相对app目录引用文件了。src="/app/js/index.9ebb586a.js"。

设置路径别名

在vite.config.ts文件defineConfig方法里：

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
  }

如果需要打包后分不同输出文件夹

在vite.config.ts文件defineConfig方法里的build:{}里：

rollupOptions: {
      output: {
        assetFileNames: 'css/[name].[hash].css',
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js'
      }
    }

css、js文件就被分别打包到了css、js文件夹里，在build对象里设置assetsDir: 'assets',，静态文件就被打包到assets文件夹里，比如字体等。

跨域设置

server: {
    proxy: {
      '^/api/.*': {
        target: 'https://...',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

其他

b变更
vue3this.$scopedSlots 替换为this.$slots，其他更改文档里都有，比如emit、filter、slot使用方式变动。
引入模块，转cm.js
vite.config.ts文件build对象里

 commonjsOptions: {
      include: /node_modules/,
       dynamicRequireTargets: [
         'node_modules/***插件***/*.js'
     ]
 }

page404设置

{
    path: '/:catchAll(.*)',
    name: '404',
    component: Page404
  }

国际化-语言包设置
文档写有，主要是根据自己的使用设置。

import { locale } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'

// 设置语言
locale(lang)