uni-app vue webstorm 开发环境配置

uni-app官方推荐是在Hbuild上进行开发，也方便的，Hbuild里面提供了官方的插件以及一些优化。但是，真正就开发IDE来讲，Hbuild或许和VSCode有可比性，但是和Webstorm来讲，Hbuild就是个弟弟！我还是喜欢手动配置后在Webstorm中开发。我认为，智能提示是一个IDE给我们的便利，但打包和运行都在IDE里面的话，等于说罩了一层壳子，是不透明的，打包和运行还是走手动靠谱的点。来看下在Webstorm中折腾uni-app吧。

让webstorm识别@路径

我们在项目文件/src/common/api声明一个const：

import http from './interface';

export const login = (data) => {
    console.log('login');
}

然后在main.js中使用的时候：

import api from '@/common/api';

发现这里有个波浪号，鼠标移上去后发现提示：Module not installed。这就很郁闷了。

我以前有一篇博客webstorm中vue语法的支持是解决了Vue项目中的这个问题，所以我尝试来使用以前的方法来解决。

我尝试将preferences > Languages & Frameworkes > JavaScript > Webpack 中的webpack configuration file配置为node_module/@vue/cli-service/webpack.config.js，无效。

又尝试用vue cli重新创建了一个独立的项目，并将新项目中的build和config文件放到我这个uni-app项目中，并且手动检查每个依赖，并安装，最后将webpack configuration file设置为build/webpack.dev.config.js。很好，起作用了，main.js中的波浪号小时，是可以链接过去的。但是，在npm run serve的时候提示webpack的参数有问题。

得，安装的webpack和uni-app的插件webpack冲突了，跑不起来，更别说开发了，这条路死了。

上面两个法子在这个uni-app项目中都不适用。首先webpack是没有暴露出来的，这里是使用了@dcloudio库中的webpack设置，我们是不可见的，所以不能用原来的方法解决。

找到了这篇文章：在 WebStorm 中，配置能够识别 Vue CLI 3 创建的项目的别名 alias @。这里说到，我们可以使用在项目根目录下面创建文件：alias.config.js来定义vue中的@路径来达到webstorm识别的跳转的：

/**
 * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
 * */
const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
    resolve: {
        alias: {
            '@': resolve('src')
        }
    }
};

然后在preferences > Languages & Frameworkes > JavaScript > Webpack中的webpack configuration file设置为alias.config.js，然后点击apply，再看main.js，很好，识别了，可以链接过去了。

支持scss

如果是用Hbuild去搞的话，想使用less、scss之类的话就需要去插件市场去安装对应的插件，那么我们用cli创建的项目咋办？

先不管其他的，我们直接在项目中应用scss看看，将src/pages/main/mian.vue'中的样式修改为scss`：

<style lang="scss">
    .hello {
        display: block;
        .title {
                color: #fff;
        }
    }
</style>

然后跑一跑看看，哟，报错了呢，😠

报错提示我们预处理css的loader没有装。

那咋办捏？这里又没有webpack，我们怎么安装呢？

查了相关资料，uni-app已经附带了预编译语言的支持，当检测到使用scss/sass/less等预编译语言但未安装依赖时，会有提示缺少xx模块，按照提示信息安装相关模块即可。

那么我们安装loader即可：

npm i node-sass sass-loader --save-dev

安装完后再运行，可以看到页面正常显示，scss的写法也会被识别。

然后就可以使用uni.scss来做统一的画风。

修改h5开发调试端口

默认的端口是8080，假设我们的业务开发时api的跨域限制为6443，那么很不方便，我们需要将h5的端口调整。

修改src/manifest.json文件，在文件最下面加上：

"h5": {
  "devServer": {
    "port": 6443
  }
}

然后重新运行，端口就被调换到了6443。