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。
网友评论