uniapp的h5项目 用命令起这个项目(vue-cli)

时间:2024-04-15 07:08:29

这里其实就相当于给uniapp h5套了一个vue-cli的壳(纯属个人感觉)

首先需要安装vue-cli 脚手架

npm install -g @vue/cli

然后创建项目(这里需要在hbuilder创建)

vue create -p dcloudio/uni-preset-vue uniapp

在这里插入图片描述
安装成功后它的结构是目录,
在这里插入图片描述
打开项目查看package.json文件,所有对应的命令都已经有了
在这里插入图片描述
用命令运行一下

cd uniapp
npm run dev

然后在把你的uniapp h5项目全部拷贝到 src文件下(这里除了node_modules不用拷贝)
拷贝完后 安装你的项目中用到ui库
比如npm install uview-ui@2.0.36

目前我自己的node 版本是16.19.0
然后运行会报 node-sass 未安装,安装版本太大会报错 (或运行不了)
最后解决办法是

npm i -D sass

然后在运行又报错

ES Modules may not assign module.exports or exports.*, Use ESM export syntax

这个网上查说是因为项目中用到了module.exports及require是属于commonJS,而export default及import则属于ES6

网上找到的方法说在package.json 文件加"type": "commonjs" 我用没有生效

最后解决方法 改为 export default

export default

然后在运行 就出现了跨域问题
解决方法

新建一个vue.config.js文件

// vue.config.js,如没有此文件则手动创建
module.exports = {
	transpileDependencies: ['uview-ui'],
	publicPath: './',

	devServer: {

		proxy: {
			"/dev-api": {
				target: "http://192.168.3.31:8080", //目标接口域名
				changeOrigin: true, //是否跨域
				secure: true, // 设置支持https协议的代理
				pathRewrite: {
					///是否重写,重写路径,就是将上面的/替换为''
					"^/dev-api": ""
				}
			}
		}
	}
}

这里需要注意一下,如果uniapp 项目中的manifest.json里有代理需要删除(我用的时候也报错运行不起来)

在运行,我目前是成功了(以上是我用命令遇到的坑)