uniapp编译出错怎么整

1. 确认错误信息

当在使用uniapp过程中，编译过程出现错误时，首先要站在开发者角度，确认错误信息，根据错误信息可知，编译出现问题的位置，从而分析问题所在。

对于uniapp开发者来说，常见的编译错误有如下几种：

未引入相关组件或库

语法错误

组件或页面路径不正确

资源文件丢失或路径不正确

在确认错误信息后，可以用更准确的关键字进行搜索，很多情况下，问题已经有了答案。

2. 检查代码

2.1 语法错误

在开发过程中，由于粗心或者是潜在的语法错误等因素，可能会导致uniapp的编译过程出现问题。因此在出现问题时，我们应该首先检查代码。

uniapp的代码检查需要配合IDE工具，如vscode、webstorm等工具，检查过程应该开启eslint插件，并配置eslint的规则。

对于代码检测，uniapp提供了官方推荐的vue-property-decorator插件，可以避免在编写vue组件时出现一些低级错误。

// 安装插件
npm i --save-dev vue-property-decorator
// 修改源码
import Vue from 'vue'
import Component from 'vue-class-component'
Vue.use(Component)

以上代码是在uniapp中添加vue-property-decorator插件的方法。

在检查代码过程中，有一点需要注意，就是在有时候会出现组件引入中，文件路径引用错误，例如：

// 错误引入
import { demo } from '../src/components/demo.vue'
// 正确引入
import demo from '../src/components/demo.vue'

需要特别注意的是，如果使用相对路径引入组件或资源文件时，需要从当前文件所在文件夹走一层再寻找，例如：

// 当前路径：/src/pages/index/index.vue
// 错误引用
import demo from '/src/components/demo.vue'
// 正确引用
import demo from '../../components/demo.vue'

2.2 项目目录和文件名检查

在进行项目创建时，uniapp会根据项目名称自动生成一个目录，如果随意更改目录名或者是更改文件名称可能会导致编译过程出现问题。

另外，在uniapp项目中，尤其注意component组件和image图像等资源文件的管理，当前页面使用到的组件以及全局组件如果路径不正确，是同样会引发错误的，常见的错误有使用类似@/components/xxxx.vue的文件路径进行引用，但实际对应路径和组件所在位置不相符，导致编译错误。

如下所示，是uniapp项目中component组件和image图像等资源文件的规范管理方式：

# /src
  # /components
    # /common # 全局公用组件
    # /demo # 页面相关组件
  # /pages
    # /home
      home.vue # 页面组件
      home.json # 页面配置信息
      # /components # 页面私有组件
  # /static
    # /image # 图像资源    

3.解决常见编译错误

3.1 sass安装问题

在uniapp中，由于平台差异问题，使用sass进行样式的开发时，需要进行安装。

对于使用sass的开发者，会遇到以下错误提示：

Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

以上报错是由于node-sass与用的node版本不兼容导致的，解决方法如下：

# 1.卸载现有node-sass
npm uninstall node-sass
# 2.清除node_modules
rm -rf node_modules
# 3.重新安装node-sass
npm i node-sass

4.总结

在uniapp开发过程中，编译过程出现错误是不可避免的，开发者需要从错误信息入手，一步一步挖掘问题，筛选解决方法。在检查代码过程中，需要细心谨慎地查看相关的路径和引用内容，尤其注意路径是否正确以及是否使用组件不能引入。