Vue项目开发过程中遇到的坑

Posted 2023-04-17

参考技术A 1 从浏览器中了解这个应用的呈现结果，对整个应用具有的大功能模块有个大致了解，比如包含欢迎页、用户管理、业务数据查询等；

2 学习了解Vue项目的默认目录结构及加载流程，比如文件index.html、package.json、main.js，目录/build、/config、/src等。

参考链接 ：

优雅的 Vue 项目目录结构设计

VUE启动流程

涉及state对象使用的，大部分是需要先引入vuex，而vuex对象的定义及处理文件，都默认存放在工程的/src/store目录下，到该目录下的相应文件中可找到其他文件依赖的变量数据。

参考链接 ：

Vuex 是什么？

import语法是很多其他语言中都有的关键词，较易理解，但export是干什么用的，export default和export又有什么区别，其他文件是如何使用export出去的变量的？

参考链接 ：

export default 和 export 区别

工程中经常见到v-auth指令，从字面意思上可以理解为权限的验证，但在网上搜不到该指令的含义和用法，后才得知为本应用的自定义指令，并有专门针对该指令进行定义的函数。

参考链接 ：

自定义指令

刚对Vue的组件概念有些了解时，会把所有的元素标签都认为是Vue自定义组件的一部分，然后开始到工程中去找该组件的定义，其实还有很多是官方组件，比如<el-popover>、<el-table>、<el-table-column>等，到相应的官网上找标签的定义和用法即可。

参考链接 ：

Element UI 教程

1 默认用的intellij idea作为Vue工程的开发IDE，在该IDE中启动Vue工程，需要安装node js，并在IDE中配置Run Configurations，详细配置见下面的参考链接；

2 配置好运行参数之后，在启动过程中报错：Error: listen EACCES: permission denied 0.0.0.0:80，该错误的原因为本地80端口被占用，通过关闭80端口占用进程或修改配置文件中的端口号即可正常启动。

参考链接 ：

idea运行vue项目

用idea在本地调试时，只要运行npm run dev即可，但若将分支部署到服务器上，则需先在本地运行npm run build进行编译，然后将编译完的文件上传至git，这样用自动化集成工具进行集成时，才可从git中拉取解析后的文件并正常被web服务读取（该操作与java工程在git中只保存源码不同）。

总结一下最近使用vue构建项目时遇到的坑

虽然vue-cli提供了很方便的脚手架来构建自己的项目，但是在实际开发过程中，我还是遇到了一些问题，现将其摘要如下：

1、使用npm run build命令后会将我们的代码压缩至dist文件夹内，dist文件夹内目录如下：

此时直接打开index.html是无法打开的，我的解决办法是将其放在本地tomcat服务器内，然后通过启动bin/startup.bat启动服务器，即可以在浏览器正常调试。

2、打开后发现有一些图片没有显示，有一些压缩为base64，一些没有被压缩，检查后发现是图片文件过大，与build文件夹内webpack.base.conf.js配置不匹配有问题，

{
        test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
        loader: ‘url-loader‘,
        options: {
          limit: 10000000,
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
        }
      },

将此处的limit值变大后正常显示

3、index.html内的js文件路径报错，

src=/static/js/manifest.4556eb0998075bdd0762.js>

此处将static前面的“/"删掉，解决。

 

本文所提的方法只是我在项目中的处理，如果有更好的办法，望指正