如何修改ant-design-vue中的样式问题

html-css012

如何修改ant-design-vue中的样式问题,第1张

1.上手ant-design-vue组件框架,想着有些样式可能和项目有点出入

2.在src目录下新建一个static静态的样式

   

3.在入口文件main.js引入css文件

4.如果只想改变一个组件中的按键需要使用深度选择器::v-deep

config 文件添加配置即可,改动后,对应改动文件打包后的文件名会变化,避免缓存

我没改动任何文件,就进行两次打包来对比文件名,结果一样,我以为方法行不通,走了弯路

构建打包成功之后,会在根目录生成 dist 文件夹,然后将dist 文件夹里的的文件复制到 spring boot 项目的 /src/main/resources/static 目录下

注意:@Controller不是@RestController,使用@RestController会返回“index”字符串

输入地址 http://localhost:8080 、 http://localhost:8080/user/login 都会转发到index.html,从而展示Ant Design Pro页面

尝试访问 http://localhost:8080/user/login 时,发现现在已经能访问到index.html了,但页面报错了,访问不到js和css,错误页面如下:

需要配置一下,让js、css等静态资源去static目录下去加载

再次访问 http://localhost:8080/user/login 页面显示正常

访问 http://localhost:8080/console/commodity/product-brand 显示后台界面

关于2.3,网上有一种思路是这样的:

Ant Design构建完成后只有一个index.html页面和一些js、css文件,当使用browserHistory,如果直接放在Spring Boot的resource/static文件夹下面,当浏览器直接访问或者在非 "/ “,”/index"路径刷新时,由于服务器无法正确响应,会直接触发404报错。

解决思路:浏览器访问任何404错误路径都返回 /index.html文件。剩下的事情交给前端路由

这种方式也能实现效果,但这种方式使得所有的错误请求(404)都会被拦截跳转到index.html ,其实不太严谨,而且给人的感觉是,先让其“出错”,再来“补救”

参考官方文档: Ant Design Pro