Vue自用踩坑点分析

1、Node.js版本

       node.js使用16.13.1版本 node/v16.13.1 官网下载地址

        相对应的node-sass版本： 6.0.1；sass-loader版本：10.0.1

cnpm i node-sass@6.0.1 -D

2、element-UI

        vue3对应element-plus

npm install element-plus --save
npm install -D sass

        main.js：

import './assets/main.scss'
import ElementUI from "element-plus"
import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.use(ElementUI)

app.mount('#app')

3、vue文本识别 “ \n ” 的换行

        style="white-space: pre-wrap;"

4、npm报错：request to https://registry.npm.taobao.org failed, reason certificate has expired

        淘宝镜像过期，修改镜像

npm config set registry https://registry.npmmirror.com

5、cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm install -g cnpm --https://registry.npmmirror.com

6、src路径引用

<img :src=[n.icons1] alt="">

7、使用echarts时路由直接跳转无反应，刷新页面后出现

要在容器加上 “ref=”

<div ref="contain" id="contain"></div>

8、静态资源(图片)打包使用

new URL(`./dir/${name}.png`, import.meta.url).href

9、Flask使用index显示空白页 报错Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

Windows系统调整注册表