Detailed explanation of Vue project creation/packaging/publishing

Create a Vue project, vue_demo is a custom project name

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev

The domain name displayed after npm run dev is executed. For example: http://localhost: 8080 /

Access: http://localhost: 8080 /

Development software: VSCode

1. Packaging command:

npm run build

 2. Release

Method 1: Static Server Toolkit

Note: If you have installed serve globally, you need to execute serve dist

npm install -g serve
serve dist

Test results from the above figure: You can visit http://localhost:3000/  on the webpage   or visit localhost to change the ip address of the machine

​

 Method 2: Dynamic web server (tomcat)

  Step 1: Modify the configuration: webpack.prod.conf.js,

  xxx is the name of the packaging folder, which is customized by the developer, such as: I want to name the folder (project name) as vue_demo
   output: {      publicPath: '/xxx/'    }

​

Step 2: ( re)package
  npm run build
 

Step 3: Package a copy of the automatically generated dist folder and modify it to the project name: xxx

Step 4:   Copy xxx to the webapps directory of the running tomcat

 

Step 5 : Visit http://localhost:8080/xxx