Vue-cli3 will not automatically create vue.config.js when it is created. Because this is an option, it is generally necessary to modify the webpack before creating vue.config.js. ..

Then, because vue-cli3 is highly integrated with webpack, generally speaking, users don't need to know what webpack has done, so the configuration file of webpack is not exposed. We can manually create vue.config.js to modify the default Web package. Note that it can only be called vue.config.js

PublicPath (baseUrl has been deprecated since Vue CLI 3.3, please use publicPath).

Reference:/. If the application is deployed in a subpath, you need to specify this subpath with this option. For example, if your application is deployed in /my-app/, set the publicPath to /my-app/.

This value also takes effect in the development environment. If you want to set up a development server in the root path, you can use a condition value:

Usually, the development environment and local operation will be directly deployed on the root path, with the publicPath set to'/'and the access address being your IP address. The following is the effect of setting it to' /app':

From the above, we can know that the static resource files are all under app, so we add a new app directory under dist, and put the files under dist under app, which is equivalent to the path of a file, and we can find that the project will start normally. Generally, nginx will configure a static resource directory, and the packaged files will be placed in this static resource directory, and nginx will do mapping, so the properties of publicPath basically do not need to be changed. /'will do.

Conclusion: If the publicPath is configured as' /aaa/bbb/ccc', a new aaa > > should be created in the corresponding server path. Bbb & gtCcc folder, and then put the packaged files in it, and it's ok.

In the project, I will be in. Env.production file, and tell the relevant personnel what the nginx routing prefix is after the project is packaged.

Output directory

Inventory of assets

Index path

File name hash

Intuitive effect: when running npm run build,

The packaged file will be followed by an 8-bit hash value, so what is a hash value?

Adding the hash of the file content to the packaged file name is the most commonly used method to effectively use the browser's long cache. If the contents of the js file are updated, the hash will also be updated, and the browser requests to change the path, so the cache will also be updated. If the js content is unchanged and the hash is unchanged, the cache will be used directly. This passage is quoted from other articles.

Try setting the value of filenameHashing to false, and there will be no hash value of that suffix.

page

Linton Savi

Runtime compiler

Cross-pipeline dependency

productionSourceMap

Crossorigin (don't understand)

complete

Configure Webpack

Chain network packet

Css related configuration

devServer

If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in the development environment. This problem can be configured through the devServer.proxy option in vue.config.js

Supplementary knowledge

The so-called cross-domain is different sources, which does not meet the agreement of the same protocol, domain name and port.

/dir/login.html is homologous.

/index.htmlDifferent source protocols are different (:90/index.htmlDifferent source ports are different (90).

/index.htmlDifferent source domain names are different (demo)

When any one of the protocol, domain name and port is different, it is a different source. If different sources request resources from each other, they are considered to be cross-domain.

Supplementary knowledge

Reverse proxy means that the proxy server accepts the connection request on the network, then forwards the request to the server on the internal network, and returns the results obtained from the server to the client requesting the connection. At this point, the proxy server appears as a reverse proxy server. The client does not need to do any configuration.

Modify the config/index.js /vue.config.js file (remember to run NPM development again after modification).

Host changes its value to 0.0.0.0, which means that all IP addresses of this machine can be accessed, so that the vue project can be accessed simultaneously through localhost and IP.

Port setting port number

Will open automatically open the browser when compiling for the first time?

Hot on is true, which will start hot overload and automatically refresh the page.

/p/b358a9 1bdf2d

/article/174200.htm

/Liu _ Zhao Yun/Article/Details /90520028

This article is also very detailed/guozhangqiang/article/details/87197870.