Shulou(Shulou.com)05/31 Report--

This article "how to achieve vue local open build to generate a dist folder index.html" most people do not understand, so the editor summarized the following contents, detailed, clear steps, with a certain reference value, I hope you can read this article can be harvested, the following let's take a look at this "how to achieve vue local open build generate dist folder index.html" article it.

1. Problem description:

Npm run build generates index and static folders in the dist file, so why can't you open it locally and open it to the backend?

How can I access it in the same way that I access the address of npm run dev?

two。 A simple method

2.1 modify configuration and access locally

Change some path parameters, and then run npm run build again to open index.html locally

Change where?

Config/index.js file

Build: {assetsPublicPath:'/'}

Change to

Build: {assetsPublicPath:'. /'}

Run npm run build again after modification

Double-click index.html.

2.2 access through services in the dist directory

Step1:

Add server.js to the dist file

Var express = require ('express'); var app = express (); const hostname =' localhost'; const port = 8080; app.use (express.static ('. /')); app.listen (port, hostname, () = > {console.log (`Server running at http://${hostname}:${port}`);})

Step 2:

Under the dist path, npm install express

Step 3:

Node server

3. Other:

3.1 insufficient local access

If the data requested by ajax is forged by accessing local files, a cross-domain error will be reported

Cross-domain reading of local data is not supported

Local access paths such as:

File:///Users/Downloads/vue-travel-master/dist/index.html

3.2 production environment does not support proxyTable

In config/index.js, only proxyTable is configured in the development environment dev to support access to the proxy path.

However, the configuration in build is invalid and the proxy address is not supported.

For example, I request data in the development environment.

Axios.get ('/ api/index.json?city=' + this.city)

ProxyTable of the development environment:

ProxyTable: {'/ api': {target: 'http://localhost:8080', changeOrigin:true,// allows cross-domain pathRewrite: {' ^ / api':'/ static/mock'}}

The access path will be replaced with http://localhost:8080/static/mock/index.json

However, this is not supported in the production environment, and the path should be fully written:

Axios.get ('/ static/mock/index.json?city=' + this.city)

In this way, node server can be accessed in the dist directory, and the effect of npm run dev is exactly the same!

From the service access address:

Http://localhost:8080/static/js/app.5115f466b0f6ef56da51.js

3.3 express configuration

Var express = require ('express'); var app = express (); const hostname =' localhost';const port = 8080Accord Express provides built-in middleware express.static to set the static file app.use (express.static ('. /')); app.listen (port, hostname, () = > {console.log (`Server running at Express)

Express will look for files in the static resource directory, that is, the upper path of server.js, the dist directory. Now you can load the files in the dist directory, such as:

Http://localhost: 8080/static/mock/index.json?city=%E4%B8%8A%E6%B5%B7

The access path is:

-- dist-- static-- css-- js-- mock-- a.json-- index.html-- server.js is the content of this article on "how to generate a dist folder index.html after opening build locally in vue. I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.