README.md · kaixin/SCUI-Vite

### SCUI支持Vite和Typescript改造

SCUI项目官网:https://lolicode.gitee.io/scui-doc/

##### 创建vite项目

```
yarn create vite
yarn install
yarn vites
```

##### 允许js
tsconfig.json添加
```
"allowJs": true,
"resolveJsonModule": true,
```

##### 合并package.json

```
  "dependencies": {
    "vue": "^3.2.25",
    "@element-plus/icons": "0.0.11",
    "@tinymce/tinymce-vue": "4.0.5",
    "axios": "0.24.0",
    "core-js": "3.19.2",
    "cropperjs": "1.5.12",
    "crypto-js": "4.1.1",
    "echarts": "5.2.2",
    "element-plus": "1.2.0-beta.6",
    "nprogress": "0.2.0",
    "sortablejs": "1.14.0",
    "tinymce": "5.10.2",
    "vue-i18n": "9.1.9",
    "vue-router": "4.0.12",
    "vuedraggable": "4.0.3",
    "vuex": "4.0.2",
    "xgplayer": "2.31.4",
    "xgplayer-hls": "2.4.32-3"
  },
```
##### 复制组件
/src/scui.js,/src/components

##### 复制main.js其他内容
根据scui/src/main.js

```
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import scui from './scui'
import i18n from './locales'   //copy
import router from './router'  //copy
import store from './store'    //copy
import { createApp } from 'vue'
import App from './App.vue'
```

##### 复制其他文件夹
scui/src/:
api,assets,config,directives,style,utils,views

##### 合并vue.config.js并重启vite服务
vite.config.ts

```
  resolve: {
    // 别名
    alias: {
      '@': '/src',
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'https://www.fastmock.site/mock/5039c4361c39a7e3252c5b55971f1bd3/api',
        ws: true,
        rewrite: (path) => path.replace('^/api', '/'),
      },
    },
  },
```

##### commonJS to esm
问题：Uncaught SyntaxError: import not found: default global.js:1:7
安装、配置vite-plugin-commonjs[7]，修改vite.config.ts
```
npm install @originjs/vite-plugin-commonjs --save-dev
yarn add @originjs/vite-plugin-commonjs --dev
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

export default {
    plugins: [
        viteCommonjs()
    ]
}
```

##### require修改成 import 
问题：Uncaught ReferenceError: require is not defined
1. src/store/index.js
2. src/api/index.js

```
const metas = import.meta.globEager('./modules/*.js')
for (let key in metas) {
	let k = key.replace('model/', '')
	modules[k.replace(/(\.\/|\.js)/g, '')] = metas[key].default
}
```

##### 合并main.js
main.ts

```
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import scui from './scui'
import i18n from './locales'
import router from './router'
import store from './store'
import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

const app = createApp(App);

app.use(store);
app.use(router);
app.use(ElementPlus, { size: 'small' });
app.use(i18n);
app.use(scui);

//挂载app
app.mount('#app');
```
##### vite忽略.vue扩展名
vite.config.ts
```
  resolve: {
    // 别名
    alias: {
      '@': '/src',
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
```

##### dynamic import cannot be analyzed by vite

##### 合并/public目录

##### 合并index.html
问题：Internal server error: Unable to parse {"file":"/index.html","line":35,"column":10}
解决办法：使用vite-plugin-html[12]
```
  plugins: [viteCommonjs(), vue(), minifyHtml(),
  injectHtml({
    data: {
      title: 'vite-scui',
      injectScript: '<script src="./inject.js"></script>',
    },
  }),]
```
##### 合并App.vue

##### prxoy设置
rewrite只能使用正则表达式
```
    proxy: {
      '/api': {
        target: 'https://www.fastmock.site/mock/5039c4361c39a7e3252c5b55971f1bd3/api',
        ws: true,
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '/'),
      },
    },
```
##### 解析模块说明符“@/views/home”时出错。
src/router/index.js

```
function loadComponent(component) {
	if (component) {
		return () => import(/* webpackChunkName: "[request]" */ `/src/views/${component}`)
	} else {
		return () => import(`@/layout/other/empty`)
	}

}

```

#### 参考资料
1. [vue-cli 迁移 vite2 实践小结](https://juejin.cn/post/6934316962952544269)
2. [vue2.0目前项目webpack更换vite](https://blog.csdn.net/u010026207/article/details/115195788)
3. [Vue3.0项目从Webpack改造成Vite](https://www.jianshu.com/p/9f42c72c1655)
4. [typescript 引入js、json配置](https://www.cnblogs.com/mengfangui/p/12212835.html)
5. [Vue3 配置文件vite.config.js——请求代理、第三方模块引用、别名alias(五)](https://blog.csdn.net/hbiao68/article/details/108972775)
6. [关于vite创建的vue3项目添加配置文件vite.config.js](https://www.cnblogs.com/jb145161/p/14763185.html)
7. [vite-plugin-commonjs](https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs))
8. [Vue 2 系统如何快速迁移 Vite 作为开发工具](https://juejin.cn/post/6981626324880195614)
9. [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations)
10. [vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?](https://blog.csdn.net/u010281877/article/details/116491779)
11. [vue3+vite2警告提示The above dynamic import cannot be analyzed by vite问题,vite中import动态引入](https://blog.csdn.net/weixin_38333426/article/details/118611345)
12. [vite-plugin-html](https://github.com/anncwb/vite-plugin-html)
13. [vite 添加别名(类似webpack的resolve.alias)](https://blog.csdn.net/weixin_43980237/article/details/117929461)

kaixin/SCUI-Vite

About

Releases

Contributors

Activities