Vue.js is favored by many front-end developers because of its simple syntax, document-friendly, and progressive framework. Especially for beginners, getting started with Vue.js is much easier than the other two of the current three front-end frameworks. But at the same time, simple does not mean low level, there is a lot to learn about vue.js, especially for beginners who have not been exposed to webPack building tools.

1. How to deploy the Vue project

The scaffolding of vue. js has configured the packaging command for us. We just need to input the command NPM run build, and a dist folder will be generated under the project. The files under the dist folder are what we need, and we can deploy them to the server at the back end.

2.Vue.js opens blank after packing

If careful, in this case, we open the debugging tool, the console will report an error, inside the static files are not found If the path on the server is the root path, there is no problem, but we usually add the project path. We can change the configuration in config/index.js. We need to change the relative path to static text The files are relative to index.html, so change them to the following

npm run build

3. The background picture is missing after Vue is packed

In vue-CLI, no matter what relative path we use, the image will be generated to staric/img after the final package /static, this is index.html, which is correct, but for CSS, the package path is still./static/img This will appear in the app.css file and the final path will be./static/ CSS /static/img and that will cause an error. In fact, you may find that small images are fine, only large background images have this problem. This is because vue-CLI has configured resources less than 10K to be packaged as Base64, so there is no problem. In fact, if you use the function of routing lazy loading, also won’t appear this problem, because the routing lazy loading is the final CSS style tags inserted into the index. The inside of the HTML, so there will be no problem, a simple solution, we can write the inline style, the style of the background image directly in the writing style of the background elements The other option is to give the CSS in webpack a separate path.

4. How does vue-CLI development cross domains

When we use VUE-CLI development, if we adjust the interface, there will be cross-domain problems. Fortunately, VUE-CLI has built-in proxy plug-in, so we can configure it correctly.

axios.post('/informationService')
Copy the code

Then NPM run dev opens the project again without cross-domain problems.

View: the original blog.noob6.com/2018/06/04/…