preface

When a VUE project is created using VUe-CLI and packed with NPM run build, a dist folder will be generated. Dist /index.html will be blank.

After checking the official vue documentation, I found that the dist directory needs to be accessed by launching an HTTP server. Using the file:// protocol to open dist/index.html directly does not work. Then the easiest way to preview locally is to set up a Node.js static file server. Here I use express framework to build, use VScode editor to edit, of course, you can also use CMD to locate the project folder under the command

The following two cases to illustrate

Case 1: VuE-CLI builds static web pages without using the server data interface API

This is the simplest case, where static web pages are mounted to a server, and Express simply sets up a server without any interface to write any data.

1.1 Package files to generate dist folder,

After executing the NPM run build command, the dist folder will be generated under the current folder. This is the packaged folder. You can move the whole folder to the new folder (personal habit).

1.2 Generating the Configuration File and Server File

When vscode opens a new folder,

Run NPM init -y to initialize the package.json file,

NPM Install Express to install the Express framework,

Create a server.js file under the current folder to set up the server

Const express =require('express') const app =express() // Pass a dist containing static resources to express.static middleware App.get (/.*/,function(req,res){app.get(/.*/,function(req,res){app.get(/.*/,function(req,res){ Res.sendfile (__dirname,'./dist/index.html')}) create a server with port 8000 and listen to app.listen(8000,()=>{console.log(" server started ")})Copy the code

Go back to the generated packjson.json file and add a quick execution script under scripts. When the console types NPM start, the node server.js file will be executed

"Scripts ": {"test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" //Copy the code

You can also Run this file by right-clicking on Run Code or the triangle icon in the upper left corner of the vscode compiler, but it is not possible for everyone to use VScode, so you can add it.

Type localHost8000 in your browser to see the packed static page

1.3 Finally, the directory changes when executing each command are attached

Case 2: A dynamic web page is built with a server-side data interface

This is a fairly common situation where there is a lot to change relative to static web pages. But the process is still the same. Note here that I write server and front-end content in the same project folder, the directory structure in development mode is like this

2.1 Changes before Packaging

2.1.1 Add a publicPath: ‘/’ to vue.config.js.

This is the base URL for deploying the application package, and all resources are linked to relative paths

Add base:’./dist’ to VueRouter on router/index.js

This is the base path of the single-page application. Dist is the generated folder name after packaging, which can be modified but must be consistent.

These two changes have no effect on the development mode, only when packaged

2.2 Package and export each file to a new folder

There’s a difference here, too, because my server and front-end files are in the same project folder, and I have a lot of dependencies and frameworks installed on my server,

So I copied and pasted the next 5 files into a new folder, otherwise I would have had to reinstall dependencies and frameworks in the new folder (the console would have told me what was missing), which would have been too much trouble

However, if there are many dependencies that are not used after installation, it is recommended not to copy them, but to generate them themselves according to the situation, in order to reduce the size of the file

Attached is the detailed table of contents at this time

2.3 Modifying the Configuration File and Server File

This is mainly a modification of the server file. The configuration file only needs to add shortcut statements

2.3.1 Modifying the Configuration File:

 "start": "node server/index.js",
Copy the code

The path needs to be added here, because the directory has changed relative to case 1

2.3.2 Modifying server Files:

The path module is used to pass static folders under the server main file. An error is reported using a relative path alone.

It doesn’t matter if you send index or HTML to the domain

// Express framework const app = express() // introduce path module const path=require('path') // Pass the static folder dist. Use (express.static(path.join(__dirname,'.. / dist '))) / / send index. The HTML to domain name app. Get (/. * /, function (the req, res) {res. SendFile (__dirname + '.. /dist/index.html')}) // Create a server with port 3000 and listen on it. Here you can use app.lesten(XXXX,function) directly. Const HTTP = require(' HTTP ') const server = http.createserver (app) server.listen(3000, () => { console.log('success listen at port:3000')})Copy the code

App. use(express.static(__dirname,’.. /dist’)), insert script error,

I guess it may be a problem with the path at this time, but I don’t know that it can’t be solved by modifying and modifying, so I guess wrongOnce created, save and run, the browser can access the packaged Vue file by typing localhost: port number

2.4 The pit left behind

The cross-domain proxy of my small project is written in vue.config,js of the front page, and set devServer. After checking, I found that devServer can only be used in the development environment, but not in the production environment. However, after I packaged it, I found no cross-domain problems with the interface used. All get methods report a 404 error, but all post methods work fine. After more than an hour without finding a solution, I had to change all get methods to POST methods. I hope whoever knows can help me solve this problem.