当前位置:首页 > 天道酬勤 > 正文内容

()

张世龙2021年12月21日 21:10天道酬勤1290

vite2有许多配置,但也可以使用默认配置。 这要看项目的需要了。

vite.config.js

首先让我们来看看vite.config.js中的常用配置。 其他配置请访问官网: https://cn.vitejs.dev/config/

//vite.config.js

从定义配置导入'

importvuefrom ' @ vite js /插件- vue '

导入从路径'//主要用于alias文件路径别名

//带别名的函数

函数关系解析(dir ) {

返回解析(_域名,'.',dir ) )。

}

// https://vitejs.dev/config/

导出默认配置({ (

plugins:[vue(],//配置所需的插件列表,在此添加vue

//配置文件别名vite1.0将从/@/2.0更改为/@

//在此处,将src目录配置别名设置为/@,以便于将src目录下的文件导入到项目中

解析: {

alias: {

'/@ ' :路径解析(' src )、

'/config ' :路径解析('公共/配置' )、

'/com ' :路径解析(' src /组件' ) )。

}

(、

base : ' vue3-博客',容易在gitee上公开

//软件包配置

build: {

目标: '模块',

//outDir: 'dist ',//指定输出路径

//assetsDir: 'assets ',//指定生成静态资源的存储路径

minify: 'terser' //模糊化工具、terser构建后的文件很小

(、

//本地执行配置和反向代理配置

服务器:

cors: true,//缺省情况下启用并允许任何源

open: true,//在服务器启动时自动在浏览器中打开APP

//反向代理配置,注意rewrite的写法,不看文档就在这里踩了坑

代理:

'/api': {

目标3: ' http://192.168.99.22:9000 ',//代理接口

变更原点:真,

写: (路径)=路径.替换/^\/API/,'')

}

}

}

} )别名在这里尝试了各种各样的方法,发现了这个可能性。 好像主要在官网上也没有说resolve在哪里引用。 缺省情况下,base识别为项目在网站的根目录中运行,但它被发布到GitHub上,只能使用https://nature fw.gitee.io/vue3- blog这样的目录轻松base: 'vue3-blog '这样就行了。 然后,可以在发布软件包时正确设置js、css等引用路径。 反向代理主要处理Ajax(axios )的跨域访问。 以前对此很模糊,但试了一下就清楚了。 尝试

跨域访问

域之间的访问方法。

安装axiosyarn add axios前端测试代码,并在组件中进行简单的测试。

导入从轴'

常数获取=() ) )。

axios.get(API/a ) )。

. then(RES={。

控制台日志(RES;

. }.catch(err={。

控制台日志(错误;

() )

{1}后端测试代码后端使用节点构建最简单的web服务

//服务器. JS

常数http=需要(http );

http.createserver (函数(请求,响应)

//设置响应头

response.writeheader(200,{1}

内容类型' : '文本/平面'

);

console.log ('有访问者) ) ) )。

//响应主体为' Hello world!'

response.write (' hello世界!' );

回应.结束(;

() )

//将监听端口设置为9000

. Listen(9000;

控制台

g('请打开:http://localhost:9000')

用 node server.js 运行这个服务。

测试运行运行vue的项目,向后端申请数据,这时候会先提交到vite2启动的web服务,然后判断后再转给node建立的web服务,处理之后返给node建立的web服务,最后返给浏览器。

前端得到的数据是这样的:因为是通过vite2建立的服务做周转,所以不算跨域。

测试通过。

安装ESlint

编写代码需要有一个共同的规范,虽然大家都有各自的习惯,但是还是需要尽量的统一一下,ESLint就是一个很好的选择。

vue-cli建立项目的时候就非常简单,我们选择一个风格就可以自动安装了,现在vite2还不够自动化,需要我们自己安装,今天学习了一下,补充这块短板。

安装yarn add eslint配置

问答的形式进行配置。

npx eslint --init

对自己狠一点,我们选择第三个,严格模式:

选择 类型模块,选择 JavaScript modules:

当然选 vue.js 了

要不要用TS?目前不会,先不用了。

代码在哪里运行?注意这是多选,那就都选好了。

进入重点环节了,开始选择代码风格了。这个大概是问你,要套餐还是单点,符合主流,我们选套餐。

vue-cli4.5建立的项, 选择的是 Standard config (ESLint+标准配置),所以这里选第二项。据说这些都是各位mmdhlg总结出来的,我们按照这个来就好。

选择配置文件的格式,这里选择js

立即执行?

其实我是想用 yarn 安装的,但是又不知道怎么写。

yarn add eslint-plugin-vue@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1

需要写成一行。

果然还是应该用 yarn 来安装。

VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint 。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26582.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。