1. Download nodejs and install it
Node.js
2. Open the command window and verify whether the installation is successful
C:\Users\Harry>node -v v18.16.0 C:\Users\Harry>npm -v 9.5.1
3. Install Vue CLI
C:\Users\Harry>npm install -g @vue/cli
After a not too long wait, your Vue CLI is installed. Making sure:
C:\Users\Harry>vue -V @vue/cli 5.0.8
4. Create a new Vue project
C:\Users\Harry>vue create hello-world-vue added 865 packages in 22s .... Invoking generators... Installing additional dependencies... added 103 packages in 5s .... ? Running completion hooks... Generating README.md... Successfully created project hello-world-vue. Get started with the following commands: $ cd hello-world-vue $ npm run serve
5. Build Vue project
C:\Users\Harry>cd hello-world-vue C:\Users\Harry\hello-world-vue>npm run build > [email protected] build > vue-cli-service build All browser targets in the browserslist configuration have supported ES module. Therefore we don't build two separate bundles for differential loading. ?Building for production... DONE Compiled successfully in 6786ms 10:56:49 AM File Size Gzipped dist/js/chunk-vendors.3199f451.js 74.86 KiB 28.06 KiB dist/js/app.acd4efbf.js 13.08 KiB 8.42 KiB dist/css/app.2cf79ad6.css 0.33 KiB 0.23 KiB Images and other types of assets omitted. Build at: 2023-09-16T02:56:49.159Z - Hash: ae38191f07779925 - Time: 6786ms DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html npm notice npm notice New major version of npm available! 9.5.1 -> 10.1.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.1.0 npm notice Run npm install -g [email protected] to update! npm notice
After running the npm run build command, you will see the created dist directory, which contains all compiled js files.
6. Start the Vue project
Execute npm run serve to start the project
C:\Users\Harry\hello-world-vue>npm run serve > [email protected] serve > vue-cli-service serve INFO Starting development server... DONE Compiled successfully in 3502ms 10:59:29 AM App running at: - Local: http://localhost:8080/ - Network: http://172.20.10.2:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
7. Visit the page http://localhost:8080
?
8. Create Dockerfile
Create a Dockerfile in the root directory of the project.
C:\Users\Harry\hello-world-vue>touch Dockerfile
Copy the following content into the Dockerfile
# Use an official Node.js runtime as a parent image FROM node:14 # Set the working directory in the container WORKDIR/app # Copy package.json and package-lock.json to the working directory COPY package*.json ./ #Install app dependencies RUN npm install # Copy the rest of the application code to the working directory COPY . . # Build the Vue.js app for production RUN npm run build # Expose port 80 EXPOSE 80 # Define the command to run the application CMD [ "npm", "run", "serve" ]
9. Create Docker Image:
Create a Docker image using a Dockerfile.
docker build -t hello-world-vue .
C:\Users\Harry\hello-world-vue>docker build -t hello-world-vue .
[ + ] Building 94.5s (11/11) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 538B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/node:18
.......
=> [internal] load build context 7.7s
=> => transferring context: 114.72MB 7.7s
=> [2/6] WORKDIR /app 0.4s
=> [3/6] COPY package*.json ./ 0.1s
=> [4/6] RUN npm install 11.4s
=> [5/6] COPY . . 1.7s
=> [6/6] RUN npm run build 4.2s
=> exporting to image 1.4s
=> => exporting layers 1.4s
=> => writing image sha256:2268a502dde3c98a590e316f25ec43f796ab5e9ac1c3af627d68bd64f19cd63a 0.0s
=> => naming to docker.io/library/hello-world-vue 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
10. Docker container running locally
Finally, run the Docker container based on the image you just built:
docker run -p 8081:8080 hello-world-vue
C:\Users\Harry\hello-world-vue>docker run -p 8081:8080 hello-world-vue > [email protected] serve /app > vue-cli-service serve INFO Starting development server... DONE Compiled successfully in 1776ms3:40:01 AM App running at: - Local: http://localhost:8080/ - Network: http://172.17.0.2:8080/ Note that the development build is not optimized. To create a production build, run npm run build. WAIT Compiling...3:40:02 AM Compiling... DONE Compiled successfully in 54ms3:40:02 AM App running at: - Local: http://localhost:8080/ - Network: http://172.17.0.2:8080/
Problems encountered
1. digital envelope routines::initialization error’
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
Solution:
Since the local node.js version is relatively high, you need to lower your node.js version, or install nvm and switch the node.js version.
Another method is to set environment variables.
Linux and macOS (Windows Git Bash)-
export NODE_OPTIONS=--openssl-legacy-provider
Windows command prompt-
set NODE_OPTIONS=--openssl-legacy-provider
Windows PowerShell-
$env:NODE_OPTIONS = "--openssl-legacy-provider"