uniapp的h5项目用命令起这个项目（vue-cli）

li@h

于 2024-04-11 17:07:14 发布

阅读量689

点赞数 4

文章标签： uni-app vue.js 前端

本文链接：https://blog.csdn.net/weixin_49066399/article/details/137643889

版权

本文详细描述了如何在uniapp项目中使用VueCLI进行开发，涉及安装步骤、遇到的问题（如node-sass版本、ES6模块转换、跨域处理等），以及解决这些问题的策略，包括vue.config.js的配置和manifest.json的注意事项。

摘要由CSDN通过智能技术生成

这里其实就相当于给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": ""
				}
			}
		}
	}
}