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…