【uni-app系列】CentOS下打包部署uni-app

目录

  • 一、环境准备
    • 1.jdk 1.8
    • 2.maven3.8.4
    • 3.NodeJS
    • 4.Nginx
  • 二、安装 uniapp-cli
    • 1.安装
    • 2.安装过程常见错误
      • (1)Cannot find module '/usr/local/compile-node-sass/node_modules/node-sass-china'
      • (2)stack Error: EACCES: permission denied, mkdir
      • (3)再次报错:Cannot find module '/usr/local/compile-node-sass/node_modules/node-sass-china'
  • 三、下载源码
  • 四、编写构建文件 package.json
  • 五、运行编译命令打包


一、环境准备

CentOS 下安装以下环境。

1.jdk 1.8

见 CentOS下安装JDK1.8。

2.maven3.8.4

见 CentOS7和8下安装Maven3.8.4。

3.NodeJS

见 CentOS7和8下安装NodeJS。
注意:安装 14.18.2 版本,高版本会存在问题。

4.Nginx

见 CentOS7和8下安装Nginx1.21.1。

二、安装 uniapp-cli

1.安装

将 windows HBuilder 目录 D:\HBuilderX\plugins\uniapp-cli 下的文件拷贝至 CentOS /usr/local/uniapp-cli 目录下(其中的 node_modules 和 package-lock.json 可以不拷贝):
【uni-app系列】CentOS下打包部署uni-app_第1张图片
在 CentOS 命令行下执行命令:

npm install
[root@localhost uniapp-cli]# npm install
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
...

2.安装过程常见错误

(1)Cannot find module ‘/usr/local/compile-node-sass/node_modules/node-sass-china’

编译过程可能会报以下错误:

 ERROR  Failed to compile with 1 error                                                                                                                                                       10:21:56 AM

 error  in /home/source/shop-uniapp/pages/order/fillorder.vue?vue&type=style&index=1&id=6a3a91c1&scoped=true&lang=scss&

Syntax Error: Error: Cannot find module '/usr/local/compile-node-sass/node_modules/node-sass-china'
Require stack:
- /usr/local/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/getDefaultSassImplementation.js
- /usr/local/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/getSassImplementation.js
- /usr/local/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/index.js
- /usr/local/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js
- /usr/local/uniapp-cli/node_modules/loader-runner/lib/loadLoader.js
- /usr/local/uniapp-cli/node_modules/loader-runner/lib/LoaderRunner.js
- /usr/local/uniapp-cli/node_modules/webpack/lib/NormalModule.js
- /usr/local/uniapp-cli/node_modules/webpack/lib/NormalModuleFactory.js
- /usr/local/uniapp-cli/node_modules/webpack/lib/Compiler.js
- /usr/local/uniapp-cli/node_modules/webpack/lib/webpack.js
- /usr/local/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni-optimize/index.js
- /usr/local/uniapp-cli/node_modules/@vue/cli-service/lib/Service.js
- /usr/local/uniapp-cli/bin/uniapp-cli.js

解决方法
执行命令:

npm install bcrypt less node-sass-china --save

(2)stack Error: EACCES: permission denied, mkdir

如果报 “stack Error: EACCES: permission denied, mkdir” 错误,执行命令:

npm install bcrypt less node-sass-china --save --unsafe-perm

(3)再次报错:Cannot find module ‘/usr/local/compile-node-sass/node_modules/node-sass-china’

如果执行以上步骤后,仍然报 Cannot find module ‘/usr/local/compile-node-sass/node_modules/node-sass-china’ 错误:

Syntax Error: Error: Cannot find module '/usr/local/compile-node-sass/node_modules/node-sass-china'

解决方法
加入两个软连接:

ln -s /usr/local/uniapp-cli/ /usr/local/compile-node-sass
ln -s /usr/local/uniapp-cli/ /usr/local/compile-less

三、下载源码

cd /home/source
git clone http://192.168.1.15/project/shop-uniapp.git

四、编写构建文件 package.json

进入项目目录,生成 package.json 文件并修改:

cd /home/source/shop-uniapp
npm init -y
vi package.json
{
  "name": "shop-uniapp",
  "version": "1.0.0",
  "description": "#####   开源不易,如有帮助请点Star",
  "main": "main.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:h5": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uni-build node /usr/local/uniapp-cli/bin/uniapp-cli.js"
  },
  "repository": {
    "type": "git",
    "url": "http://192.168.1.15/project/shop-uniapp.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "less": "^4.1.2"
  },
  "devDependencies": {
    "node-sass-china": "^4.13.1"
  }
}

五、运行编译命令打包

npm install cross-env -g && npm install && npm run build:h5

此时会在 /home/source/shop-uniapp/unpackage/dist/build/h5/ 目录下生成部署文件,将文件发布到 Nginx 的部署目录即可。

你可能感兴趣的:(前端深入浅出,uni-app,前端,vue,linux,centos)