ts+vite+element-plus+npm发包的各种坑

做一只快乐的咸鱼

已于 2023-03-26 17:01:09 修改

阅读量4k

点赞数 2

文章标签： vue.js 前端 javascript typescript 前端框架

于 2023-01-21 21:16:00 首次发布

本文链接：https://blog.csdn.net/melissaomy/article/details/128747438

版权

一、'index.vue' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

解决：找到tsconfig.json，将isolatedModules改成false，重启项目

二、XXX is declared but its value is never read.Vetur(6133)

解决：VScode找到设置输入vetur valid，勾出来的地方取消勾选，重启

三、切换路由到/chooseIcon无反应

const routes:RouteRecordRaw[] =[{
  path: '/',
  component: Container,
  children:[{
    path: '/',
    component: Home,
  },{
    path: '/chooseIcon',
    component: () => import('../views/chooseIcon/index.vue'),
  }],

}]

解决：在一级路由下忘记写router-view

四、element-plus的el-dialog需要提供一个属性v-model来控制弹框的显示与隐藏，但是在使用v-model的时候就报错，

<template>
 <el-button @click="handldClick" type="primary">
  <slot></slot>
 </el-button>
 <el-dialog :title="title" v-model="visible">
 111
 </el-dialog>
</template>

解决：根据文档的提示，尝试使用model-value，发现可以使用

<template>
 <el-button @click="handldClick" type="primary">
  <slot></slot>
 </el-button>
 <el-dialog :title="title" :model-value="visible">
 111
 </el-dialog>
</template>

五、vue3中想要修改element-plus中的样式，使用:deep(类名)的方式也不管用，于是定义了一个修改组件库的样式（如下），想在App.vue中导入使用，但没生效

// 1、需要自定义类名

.el-dialog{

.el-dialog__body{

  height: 500px;

  overflow: scroll;

}

}

最后发现是在App.vue中没有去掉scoped导致样式不生效

补充：封装了一个复制的功能

import { ElMessage } from 'element-plus'
// 复制文本的功能
export const useCopy=(text:string)=>{
// 创建input框
let input = document.createElement('input')
// 让input框的值等于传进来的值
input.value= text
// 追加到body
document.body.appendChild(input)
// 选中输入框的操作
input.select() 
// 执行复制操作
document.execCommand('Copy')
document.body.removeChild(input)
ElMessage.success('复制成功') 
}

使用useCopy方法

// 点击图标
const clickItem =(item:string)=>{
console.log('item',item);
let text =`<el-icon-${toLine(item)}/>`
useCopy(text)
}

六、ReferenceError: __dirname is not defined in ES module scope

原因是在package.json 加了配置:

"type": "module"

解决：

1、方法一：删除文件 package.json 中的配置项："type": "module"

2、

import path from "path"

const __dirname = path.resolve();

console.log(__dirname);

七、npm publish的时候一直提示错误

npm ERR! code E409
npm ERR! 409 Conflict - PUT https://registry.npmmirror.com/-/user/org.couchdb.user:xxx - [conflict] User xxx already exists

npm ERR! A complete log of this run can be found in:

失败原因

可以看到PUT的地址并不是`registry.npmjs.org`，而是 `npmmirror`。

解决方法，终端输入

npm config set registry https://registry.npmjs.org

可以通过如下指令，查看是否已经切换成功

npm get registry

`npm publish` 发布完后，切换回淘宝镜像地址

npm config set registry http://registry.npm.taobao.org/

八、 npm publish 遇到的ERR

解决：npm publish的时候name不能重名，private不能私有

当出现这个的时候发布成功了

九、在vite项目npm run build打包dist文件及打包后空白

解决：在`vite.config.ts`文件添加`base:`'./'，如下，

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()], //注意：vite的插件都是函数的形式
  server:{
    port:8080
  },
  base:'./'
})

十、vitepress 报错：

Could not resolve "@vueuse/shared"

Could not resolve "vue-demi"

原因：.vitepres下的theme文件夹下的index.js中的enhanceApp传入的app没有解构

import defaultTheme from 'vitepress/theme'
import  ElementPlus  from 'element-plus'
import 'element-plus/dist/index.css'
import mUI from  'm211-components'
import 'm211-components/style.css'

export default {
  ...defaultTheme,
  enhanceApp({app}){ //错写成了enhanceApp(app)
   app.use(ElementPlus)
   app.use(mUI)
  }
}

十一、npm在安装vue cli的时候报错：

invalid json response body at https://registry.npmjs.org/vue reason: Unexpected end of JSON input

解决：由于上次npm发布后没有改回淘宝镜像，使用以下命令就好

 npm config set registry https://registry.npm.taobao.org

十二、npm i 的时候报错：Your cache folder contains root-owned files, due to a bug in

在npm run serve的时候报错：Syntax Error: Error: EACCES: permission denied, mkdir '/Users/l-008586/Desktop/myvue3project/node_modules/.cache'