uni-app 转 vue-cli项目配置多环境

首先全局安装vue-cli(如果安装报错，可先卸载（终端执行npm uninstall -g vue-cli），再安装(npm install -g @vue/cli))

npm install -g @vue/cli

创建一个空的uni-app项目

vue create -p dcloudio/uni-preset-vue my-project

创建时，会提示选择项目模板，选择默认模板即可。可参考：https://uniapp.dcloud.io/quickstart-cli
安装完后，在项目根目录创建src文件，然后把需要转换的工程内所有的文件复制到src文件中。

node-sass安装

npm install node-sass@4.14.1 --save
npm install sass-loader@8.0.0 --save

然后可执行
npm run serve 运行项目
npm run build 打包项目

若项目需要配置多环境打包发布
参考文章链接：uni-app -- cli创建多环境以及打包问题

只需在配置js时设置

if (process.env.env.VUE_APP_ENV === 'development') { // 开发环境
//配置开发环境相关地址
} else if (process.env.VUE_APP_ENV === 'test') { // 测试环境
//配置测试环境相关地址
} else  if (process.env.VUE_APP_ENV === 'production') { // 正式环境
//配置正式环境相关地址
} 

package.json中以h5为例

"scripts": {
    "build:prod": "npm run build:h5",
    "build:dev":"npm run build:h5dev",
    "build:test":"npm run build:h5test",
    "build:h5dev":"cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:h5test":"cross-env VUE_APP_ENV=test NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:h5": "cross-env VUE_APP_ENV=production NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"
    }
    

打包后文件路径为 dist/build/h5

打包h5静态资源路径错误, 相对路径修改