跟着官网构建完成后
yarn 拉取包后直接 yarn dev 无法运行起来
命令行显示
> Local: http://localhost:3000/
> Network: use `--host` to expose
页面显示 Cannot GET /
原因:没有局域网中暴露服务
需要再 vite.config.ts 中添加配置
server: {
host: '0.0.0.0'
}
添加后命令行显示
> Network: http://192.168.52.1:3000/
> Network: http://192.168.142.1:3000/
> Local: http://localhost:3000/
> Network: http://172.17.12.99:3000/
可正常访问
由于 vite 中没有帮我们引入 eslint 代码校验,所以我们需要自己手动配置 eslint
注意不要照抄 vue-cli 里的 .edlintrc.js 配置 其中一些引入的内容是针对 vue-cli 来的
需要安装的包
yarn add eslint eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint -D
各包说明
//基础的 eslit
eslint
//Vue 的官方 ESLint 插件 针对 vue 语法进行校验
eslint-plugin-vue
// standard 规则校验
eslint-config-standard
eslint-plugin-import
//eslint-plugin-n 用 n 不要用 node node 停止维护了 standard 依赖会报错
eslint-plugin-n
eslint-plugin-promise
// 一个 ESLint 解析器,它利用 TypeScript ESTree 允许 ESLint lint TypeScript 源代码
@typescript-eslint/parser
// 一个 ESLint 插件,为 TypeScript 代码库提供 lint 规则
@typescript-eslint/eslint-plugin
vite-plugin-eslint // vite ESLint 插件。
添加.eslintrc.js 文件
module.exports = {
root: true,
parser: 'vue-eslint-parser',
extends: [
'standard',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended'
],
plugins: ['@typescript-eslint', 'vue'],
env: {
node: true
},
parserOptions: {
ecmaVersion: 2020,
parser: '@typescript-eslint/parser'
}
}
如果不生效检查下 vsconde eslint 插件有没有安装启用,如果安装了 看下 eslint 插件有没有报错
vue3 <script setup lang="ts"> 写法中不需要引入 defineProps 即可使用
但是 eslint 会报错
需要在配置文件中添加配置
env: {
node: true,
'vue/setup-compiler-macros': true ++
},
之后发现新问题
发现 standard 语法规则 vscode 会报红 但是运行不会报错
发现是 vite.config.ts 中 eslintPlugin({ include: []}) 只写了 js 将 ts 补上就好了
在 vite.config.ts 中配置
resolve: {
alias: {
// 当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。
'@': path.resolve(__dirname, './src')
}
}
没有 path 需要引入 import path from 'path'
如果 path 报引入错误 需要在 tsconfig.node.json 中 添加
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
如果是 ts 项目 还需要 yarn add @types/node -D
同时在 config.json 中添加
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
yarn add vue-router@4
npm add -D stylus
官网说明
Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。
没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖
引入全局则需要 yarn add stylus-loader -D
引入全局样式在 vite.config.ts 中添加
css: {
preprocessorOptions: {
stylus: {
imports: [
path.resolve(__dirname, './src/assets/stylus/reset.styl')
]
}
}
}
yarn add vite-plugin-compression -D
在 vite.config.ts 中引入 配置说明
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins:
[
viteCompression({ threshold: 100 * 1000 })
]
})
transition 内必须只有一个根元素
在之前 package 打包模式下
提供了 require.context 来进行文件夹遍历导入功能
我们在自动导入 store 中用到了
在 vite 中 没有 require.context ,vite 提供了 import.meta.glob 进行导入
1
mythjava 2022-07-01 08:34:06 +08:00
感谢分享
|
2
wonderfulcxm 2022-07-01 09:31:01 +08:00 via iPhone
为什么暴露到局限网才能访问 localhost ?
|
3
rhli1995 2022-07-01 09:31:48 +08:00
感谢分享
|
4
missilexuan OP @wonderfulcxm 底层原理不太清楚。。。。我也是网上找的解决方案 感觉就是服务没挂上去 挺迷的
|