The company’s projects have been developed using VUE. Recently, the company’s projects need to be developed using UniAPP, but UNI-App uses the syntax of VUE instead of the syntax defined by small programs. Uni-app can implement a set of code and run on multiple platforms at the same time. The structure of vuE-CLI command line is as follows:

Dist ======= Packaged file storage (e.g. small program subcontracting)

MainWeixinMp ==== can store native small programs or use uniApp packaged small programs

Public ===== Entrance file

ProjectToSubPackageConfig. Js = = = = = use third party packaging configuration

Vue. Config. Js = = = = = = = vue configuration

In the process of packaging h5 code, in order to switch the environment without manually changing the configuration file, we use the node related API to modify the configuration file vue.config.js configuration:

const path = require('path'); const fs=require('fs') const { execSync } = require('child_process'); const {NODE_ENV,UNI_PLATFORM}=process.env; const branch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf-8' }).trim(); // const branch = 'develop'; Const staticDomain = {different environment domain name configuration}; const domain = staticDomain[branch] || ''; // Inject the current branch into the environment variable process.env.vue_app_branch = branch; // Inject the current static resource domain name into the environment variable process.env.vue_app_domain = domain; // console.log(' current branch: ', branch); // console.log(' static resource path: ', domain); Function editH5Config() {const SRC = path.join(__dirname, './ SRC /manifest.json'); const json = fs.readFileSync(src, { encoding: 'utf-8' }); const [$0, $1] = /"publicPath":.+(".*")/.exec(json); const data = json.replace($0, $0.replace($1, `"${domain}"`)); fs.writeFileSync(src, data); } if(NODE_ENV=== 'production'&&UNI_PLATFORM==='h5'){ const outputDir=''; UNI_OUTPUT_DIR=outputDir; // Process. Env. UNI_OUTPUT_DIR=outputDir; editH5Config(); Exports = {productionSourceMap: false,}Copy the code

Add this to package.json:

"prd": "cross-env UNI_OUTPUT_DIR=dist NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
Copy the code

Run NPM run PRD to package directly into an H5 file

After completing h5 packaging, it is necessary to consider packaging the whole project into small programs and subcontracting them to other projects or adding them into the main package to generate small programs. The uniapp2WxPack plug-in needs to be introduced first

Uinapp most of the subcontract of the entire project (found after packaging components and between the components referred to as an absolute path will lead to can not find the reference component, so you need to change reference address) need in projectToSubPackageConfig. Js configured in the subcontract name a

// exports = {// mainWeixinMpPath: 'mainWeixinMp, / * * * * * * * * * * * the main package * * * * * * * * * * * * * / / / output uni project subcontract in WeChat native path subPackagePath in small program: PackName, // Processing of initial Settings in app. vue of a UNI project. The default is to relegation, [top(top mode)/None (discard)] appMode: Relegation ', // Whether to relegation? If the directory names in the wechat native applet directory are the same as those of the UNI project output, merge the directories in the native applet to relegation: false, plugins: [ (content, = > {{relative}) / / component reference to relative path between components and components of the if (relative) match (/ \ / node - modules \ / (\ S *) uview - UI \ / components \ [\ S] + \. Json $/ g))  { const json = JSON.parse(content); // console.log('relative===============',relative) if (json.usingComponents) { // Eslint-disable-next-line no-restricted-syntax for (const I in json.usingComponents) {// Replace url // if(relative=='/a/node-modules/uview-ui/components/u-parse/libs/trees.json'){ if(relative.match(/\/node-modules\/(\S*)uview-ui\/components\/[\S]+\/libs\/[\S]+\.json$/g)){ // json.usingComponents[i] = './trees' json.usingComponents[i] = json.usingComponents[i].replace(/\/node-modules\/(\S*)uview-ui\/components\/[\S]+\/libs/, '.'); }else{ json.usingComponents[i] = json.usingComponents[i].replace(/\/node-modules\/(\S*)uview-ui\/components/, '..'); } // if (json.usingComponents[i] == '../u-parse/libs/trees') { // json.usingComponents[i] = './trees' // } } return JSON.stringify(json, null, 2);}} else if (relative) {// replace all urls // eslint-disable-next-line no-param-reassign Content = content.replace(/node-modules/g, modulesName); } return content; }, ], }; References between components within components are changed to relative pathsCopy the code

If more than one project needs to be packaged into a widget, the widget contains component directories with different names, so you need to rename the component directory at packaging time, so you add a custom.script.js

Const path = require('path'); const path = require('path'); const fs = require('fs'); // subPackageName = 'a' // oldDirName = 'node-modules'; // new package const newDirName = 'a-modules'; Const dirs = ['./dist/build/mp-weixin-pack/${subPackageName}/ ']; dirs.forEach((dir) => { const oldPath = path.join(__dirname, `${dir}${oldDirName}`); const newPath = path.join(__dirname, `${dir}${newDirName}`); const stat = fs.statSync(oldPath); if (stat.isDirectory) { fs.renameSync(oldPath, newPath); }}); Console. log(' Name changed successfully... ');Copy the code

Json file scripts add “build:mp-weixin-path”: “NPM run build:mp-weixin-pack && node custom.script.js”

Run NPM run build:mp-weixin-path, and the directory of subcontracted and rewritten components is as follows:

Give typed documents to other projects as subcontracting

Therefore, when subcontracting was added as the main package in other projects as a small program project, there was an error when subcontracting jumped, and it was found that the file in the subcontracting had the same name as the file in the main package when it was packaged as the main package, so an error was reported. So I need to projectToSubPackageConfig. Js configuration changes in the configuration are as follows:

Module. exports = {// wechat native applets directory mainWeixinMpPath: 'mainWeixinMp, / * * * * * * * * * * * the main package * * * * * * * * * * * * * / / / output uni project subcontract in WeChat native path subPackagePath in small program: To relegation, [top(top mode)/None (discard)] appMode: Relegation: 'top', // If the directory name in the wechat native applet directory is the same as the directory name in the uni project output, whether to merge, default is not merge, directly ignore the directory in the native applet, merge with uni project first mergePack: true, plugins: [ (content, {relative}) => {const packList = ['a']; try {packList. ForEach ((packPath) => {const jsRegExp = new RegExp(`^\\/${packPath.replace(/\//g, \ \ \ \ '/')} / [\ \ S] + \ \. Js `) / / match to the uni js if (relative) match (jsRegExp)) {/ / replace webpackJsonp (not the best solution, Throw Error(content.replace(/global\["webpackJsonp"]/g, 'global["webpackJsonp_${packPath}"]'))}})} Catch (e) {// replace return e.message} return content},],};Copy the code

NPM run dev:mp-weixin-pack successfully opened the mp-weixin-pack using applets development tools

Whether debugging is successful or not, the whole development ends here

Uinapp view the document: https://uniapp.dcloud.io/quickstart

Uview official documentation: http://uviewui.com/components/intro.html

uniapp2wxpack.js:https://github.com…