Vue开发小技术点

title: Vue开发小技术点 id: 3f4363c59b1ca1f82edcf5f8d20f307f tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

Vue开发小技术点

使用二级目录访问项目

当前的vue项目，正常情况就是独立的一个项目，比如当前项目部署完成后，访问路径为：https://www.abc.com

但有时，当前vue项目只是一个大项目下面的一个二级目录，访问路径变成了https://www.abc.com/vue

这是就需要我们修改一下vue项目的配置，才能支持了。

修改路由访问路径

修改vue的路由配置：

const router = new Router({
  mode: 'history',
+  base: 'vue',
});

修改完成后，相当于给所有的路由前添加了/vue匹配，路径出现以下变化：

• http://localhost:8080 => http://localhost:8080/vue

• http://localhost:8080/user => http://localhost:8080/vue/user

• https://www.abc.com => https://www.abc.com/vue

• https://www.abc.com/user => https://www.abc.com/vue/user

这样基本已经就完成了需求，运维配置上，可以匹配 /user 指向 这个项目目录即可

修改打包后，index.html 中引用资源的路径（可选）

本来，打包后的dist文件夹内部主要文件和目录如下：

• index.html

• favicon.ico

• css/

• js/

index.html中里面引用js和css等静态文件时，引用路径是类似/js/app.js的绝对路径。

但vue项目改为二级目录，运维又不想修改nginx配置，只想把这个项目打包后的文件，放在总项目根目录下的vue文件夹中，那这时就需要我们前端在打包时修改引用路径了：

修改vue项目根目录下vue.config.js文件

module.exports = {
+  publicPath: 'vue',
}

修改后再进行打包，index.html引用静态文件的路径变为/vue/js/app.js，符合静态文件相对web服务器根目录的相对位置，可以正常访问到了。

根据试验，修改publicPath为不同的值，引用路径的变化如下

publicPath的值	index.html引入资源的路径
不配置publicPath或值为/	绝对路径：/js/app.js
值为.或./	相对路径：js/app.js
值为vue或/vue	绝对路径：/vue/js/app.js
值为./vue	相对路径：vue/js/app.js

element-ui 按钮的优化

Element-ui 的 el-button 按钮，在点击后，仍然会保持的被选中的状态，此时的样式还是 hover 时的状态，再次回车，也仍会触发点击按钮的事件。

很多时候，我们并不需要这个功能，所以我们需要全局执行一次下面的方法：

// el-button 按钮的 focus 样式效果去除
window.addEventListener('click', function (e) {
  if (e.target.nodeName == 'SPAN' || e.target.nodeName === 'BUTTON') {
    let target = e.target || {};
    if (target.nodeName == 'SPAN') target = e.target.parentNode;
    target && target.nodeName == 'BUTTON' && target.blur();
  }
})