Article directory
1. Packaging environment
1. Environment version
| software | Version |
|---|---|
| nodejs | v14.17.5 |
| view/cli | 4.5.15 |
| vue | 2.x |
2. Set up the environment
Install nodejs
win：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-x64.msi
linux：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
Linux installation process:
wget https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
tar -xvf node-v14.17.5-linux-x64.tar.xz
mv node-v14.17.5-linux-x64 nodejs
ln -s /app/nodejs/bin/node /usr/local/bin/
ln -s /app/nodejs/bin/npm /usr/local/bin/
node -v
https://nodejs.org/download/release/v14.17.5/Uninstall
default vue/cli
npm uninstall -g @vue/cli
Install vue/cli
npm install -g @vue/[email protected]
2. Create a project
2.1. HBuilder X creates project
my-project-x
changes the display text to gblfy.com
2.2. Create project with cli
Create a new project through cli
vue create -p dcloudio/uni-preset-vue my-project-cli
Select the default version (just hit the Enter key)
to create the project structure
2.3. H5 project transplantation
Delete all the files under the my-project-cli project src.
Select all the uniapp files and copy them to the my-project-cli project src. No modification is required.
2.4. Project operation
cd my-project-cli
npm run serve
2.5. Packaging personalized configuration
Specify the packaging output path. This configuration is not required and can be skipped.
Edit package.json under my-project-cli
and add 2 lines of configuration under build:h5
"build:h5_test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_test vue-cli-service uni-build",
"build:h5_prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_prod vue-cli-service uni-build",
2.6. Project packaging
Default packaging. After executing the packaging, the dist folder will be generated. dist/build/h5 is the static folder after packaging. Just put it on the server.
npm run build:h5
Test packaging. After executing the packaging, the dist folder will be generated. dist/build/h5_test is the packaged static folder. Just put it on the server.
npm run build:h5_test
The difference between the two is the name of the packaged folder, everything else is the same.
3. Project development
3.1. Run the project in development mode
Select built-in terminal
3.2. Verify real-time compilation
Modify whether the title content supports compilation.
Change gblfy.com to gblfy.com 666
As can be seen from the screenshot above, compilation is supported
4. Abnormal summary
4.1. node-sass error reporting
The script has been configured for us in advance. You can configure whatever environment you need. It is convenient and fast, and your eyes will light up when you look at it. Unexpectedly, when I actually ran it, I found that many dependent packages were missing. I followed the prompts and installed them all one by one. During this period, you may encounter a node-sass error, like this: incompatible with ^4.0.0. This is because of node-sass compatibility issues. The solution:
npm uninstall node-sass
npm install [email protected]
Just rerun the project