Nginx rewrite not work when it comes to vue. 前两日有一个需求，将所有uri前缀是/con的请求做转发。于是在nginx配了rewrite permanent，例如以下: reload之后，发现不生效，还是之前的跳转情况，自动跳转入登陆页。 尝试修改了多次，依然不见效。 F12查看，网络请求状态码没有变成301。改成return 403后，依然如此。 关键点来了，打开nginx accesslog查看，跳转时并没有请求nginx。 这时才想起来vue自身的routing。vue做为单页面前端，在第一次进入页面时，加载了核心组件，包括routing，之后的页面路由由vue自己控制。 验证如下，在服务器上直接curl请求/con，发现能够正常返回301或403。 所以，对于vue的项目，需要做url转发时，需要编码在vue工程内实现，示例如下：
近年来，大多数互联网公司，后端B/S工程大多数都使用Vue构建响应式web应用，例如开发平台、管理后台、分析平台等。在看某些Vue页面template代码时，是否会对<style scoped>产生疑惑？ scoped是什么 指的是给css style加个作用范围。 翻阅官方链接：这里，文档指出是预处理器对css样式和template的标签做了转化，添加唯一id属性。相当于dom加了个标记，css选择器也带了这个标记。这样对指定dom设置了样式。 使用场景 在项目中，常见是所有页面共用一个vue实例。 前端code经过npm或yarm打包之后，如果一个页面的style没有指定scoped，则这个页面下添加的style作用域是全局所有页面。 ？！！某一天新增了1个页面的代码，加了组件样式，没使用scoped，上线后发现整个后台其他页面都受到影响~ 实现原理 vue预处理时，在template的dom元素中，添加唯一性id的属性，如下图： 相应的css也添加同一个id属性，如下图： 但值得注意的是，vue预处理器仅会对template中的标签添加id属性，不会对生成的dom元素添加 例如，使用js初始化生成html的组件，如echart、codemirror等，组件生成的div是不经过预处理的，不会带这个id。 以codemirror经过预处理的状态变化为例： 解决方法： 这类场景需弃用scoped，使用css选择器。 例如添加仅在本页面生效的全局唯一id或class，作为css选择器的parent。
