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

This article mainly introduces the "vue project package upload github and make preview link method" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, hope that this "vue project package upload github and production preview link method" article can help you solve the problem.

When the Vue project is complete, open the command line in the root directory and enter the command:

Npm run build

In effect, this command executes the build.js file, packaging the project into static resources.

After this command is completed, there will be an extra dist folder in the root directory of the project, and the dist file contains:

The static file includes the packaged css, js, img and fonts (font icons) of the project.

Project resources cannot be loaded

Click index.html, and the browser shows that the page is blank. Open the console and see that no css or js files are loaded in the index.html file.

Solution:

Open the index.js file under the project root directory config and make the following changes:

Change assetsPublicPath:'/'to assetsPublicPath:'. /'

Re-npm run build after saving, click index.html under the newly generated dist directory, and the page structure is displayed normally, but the page font icon and mock data cannot be loaded normally.

Font icon cannot be loaded

The images loaded with background on the page can be displayed normally, but all font icons cannot be displayed properly. The solution: open the utils.js file in build in the root directory, and add publicPath:'.. /.. /'to the code for controlling the build style file, as follows:

After saving, still re-npm run build', open the index.js in the dist directory and you can see that the font icon is displayed properly.

Why do you need to modify it like this? please refer to https://github.com/vuejs-temp.... .

Mock data cannot be loaded properly (my approach is to put the simulated json data on cdn and skip this step)

Most of the page content of this project is rendered to the page through the data.json file created in the directory, simulating the request for data from the backend. Using the 'npm run dev' command during development and debugging, a local server will be started with the help of node, and the corresponding data can be rendered normally. While through the packaged project is a static resource, click index.html to view the project, it is unable to load mock data, the browser will also report a cross-domain error. If you want to load mock data normally, the best way is to throw the packaged resources into the server, or use jsonp to request online real data, because its principle is to use script tags to obtain data, which can be previewed on github.

How to preview web page effects on github:

Settings-github pages- Select "master branch" and "save"-Refresh-find the link under the "github pages" copy again-return and click on the warehouse name-Click edit- to paste into the box, be sure to add the file name and its suffix such as index.html-save. Others can visit your web page through this link.

This is the end of the content about "the method of packaging and uploading github and making preview links for vue projects". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.