Several techniques in the development of vue.js2.0

Recently developed several projects with Vue.js, Vue's two-way data binding and component let me refreshing, reducing many of the underlying duplication of work, and based on the Jquey front-end development, based on the development of Vue gave me a feeling of hearty.

Here are a few pages I made based on vue.js: the material page, 520 Guizhou, the people pay attention to rob red envelopes.

Of course, in the process of development, inevitably encountered some problems and pits, here to record these problems, accumulate experience.

1. Test the environment relative path problem

Vue.js 2.0 can be built based on wepack, and if you need to package and generate the final output code, enter the command directly in the DOS window: NPM run build. But when I put the code into the test environment, but found that the CSS, JS file resources can not find, after finding out the output folder "/dist" in the index.html referenced in the CSS, JS file relative path is not correct, and then I find resources on the Internet, found a solution, The Webpack.base.conf.js file in the build folder in the 17th line of code to change to as shown, the meaning is better understood, that is, webpack in the packaging, the public relative path is '. /', so that the CSS and JS files can be found correctly.

2. Local debugging How to troubleshoot cross-domain issues

Web front-end development is unavoidable to encounter cross-domain problems, especially when we debug the page locally, and the server API interface in the test environment, to solve the cross-domain problem, either using JSONP, or the code can only be deployed to the test environment before debugging, each time the code changes, you need to deploy to the servers, This is undoubtedly inefficient, but vue.js use proxytable very good solution to this problem, in practice, only need to change the Config directory index.js in the 30th line of code to the following:

You will then need to add "/api" in front of the URL path to the HTTP request, such as:

3. Production environment Code does not generate a map file

The Vue project built with Webpack will generate. map files by default when executing NPM run build, and. map files are only needed during the debugging phase, and the build environment does not require such files, so how can I not generate a. map file? Similarly, it is only necessary to configure Webpack, modify the config path under the Index.js file, the value of Productionsourcemap to false.

4. Development environment Report "Vue is not an internal or external command" issue

Some time ago in the development of a project, the development environment problems, has been reported "Vue is not internal or external command", in the Internet to find solutions, most people say the environment variable set wrong, but I follow the method they provide, still error, and then after 1 days and a half, I decided to reinstall Vue , and then you can use it normally.

Several techniques in the development of vue.js2.0