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

This article mainly introduces "how to solve the problem of cross-domain routing conflict in vue". In daily operation, I believe many people have doubts about how to solve the problem of cross-domain routing conflict in vue. The editor consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful for you to answer the doubt of "how to solve the problem of cross-domain routing conflict in vue". Next, please follow the editor to study!

Introduction to vue

Vue.js (pronunciation / vju steps /, similar to view) is a progressive framework for building user interfaces.

Vue only focuses on the view layer and adopts the design of bottom-up incremental development.

The goal of Vue is to implement responsive data binding and composite view components through the simplest possible API.

Vue is very easy to learn, and this tutorial is based on Vue 2.1.8 testing.

Cross-domain problems can be solved when we configure the following proxies in the route

ProxyTable: {'/ goods/*': {target: 'http://localhost:3000'},' / users/*': {target: 'http://localhost:3000'}}

This configuration solves the cross-domain problem to some extent, but it will bring some problems.

For example, if our vue route is also named goods, there will be conflicts.

If there are many interfaces in the project, it is troublesome to configure them here, and it is easy to cause routing conflicts.

The correct posture

If all interfaces are unified and standardized as one entry, the conflict will be resolved to a certain extent.

Add / api/ to the front of the above configuration

ProxyTable: {'/ api/**': {target: 'http://localhost:3000'},}

If we configure it in this way, it will change when we use the http request. We will add an api before the request, the relative route will also change, and we will add api in front of the interface. This will also be very troublesome. We can use the following ways to solve this problem.

ProxyTable: {'/ api/**': {target: 'http://localhost:3000', pathRewrite: {' ^ / api':'/'}},}

The above code removes our virtual api interface, and when we really go to the backend request, we will not add the api prefix, so when we request the http in the foreground, we must also add the api prefix to match the proxy. The code is as follows:

Logout () {axios.post ('/ api/users/logout') .then (result= > {let res = result.data; this.nickName ='; console.log (res);})}, getGoods () {axios.post ('/ api/goods/list') .then (result= > {let res = result.data; this.nickName ='; console.log (res);})}

We can use axios's baseUrl to directly default to api, so that every time we visit, we automatically fill in this api prefix, so we don't have to write this prefix on each interface by hand.

Configure it in the entry file as follows:

Import Axios from 'axios'import VueAxios from' vue-axios'Vue.use (VueAxios, Axios) Axios.defaults.baseURL = 'api'

If this configuration 'api/' reads the local domain by default

If configured in this way, the production and development environments will not be distinguished.

Create a new api.config.js configuration file in the config folder

Const isPro = Object.is (process.env.NODE_ENV, 'production') module.exports = {baseUrl: isPro? 'http://www.vnshop.cn/api/':' api/'}

Then introduce it into main.js, which ensures that the definition prefixes of production and development are dynamically matched.

Import apiConfig from'.. / config/api.config'import Axios from 'axios'import VueAxios from' vue-axios'Vue.use (VueAxios, Axios) Axios.defaults.baseURL = apiConfig.baseUrl

After the above configuration, it can be accessed so easily in dom, and there is no need to introduce axios modules into any components.

Logout () {this.$http.post ('/ users/logout') .then (result= > {let res = result.data; this.nickName ='; console.log (res);})}, getGoods () {this.$http.post ('/ goods/list') .then (result= > {let res = result.data; this.nickName ='; console.log (res);})}

Final code

Configure in the agent

ProxyTable: {'/ api/**': {target: 'http://localhost:3000', pathRewrite: {' ^ / api':'/'}},}

Api.config.js configuration in config

Create a new api.config.js configuration file in the config folder

Const isPro = Object.is (process.env.NODE_ENV, 'production') module.exports = {baseUrl: isPro? 'http://www.vnshop.cn/api/':' api/'}

Don't know much about production and development configuration.

You can check the configuration code in dev-server.js.

Const webpackConfig = (process.env.NODE_ENV = = 'testing' | | process.env.NODE_ENV = =' production')? Require ('. / webpack.prod.conf'): require ('. / webpack.dev.conf')

Configure in the main.js entry file

Import apiConfig from'.. / config/api.config'import Axios from 'axios'import VueAxios from' vue-axios'Vue.use (VueAxios, Axios) Axios.defaults.baseURL = apiConfig.baseUrl

Request the posture of api in dom

Logout () {this.$http.post ('/ users/logout') .then (result= > {let res = result.data; this.nickName ='; console.log (res);})}, getGoods () {this.$http.post ('/ goods/list') .then (result= > {let res = result.data; this.nickName ='; console.log (res);})}

PS: learn the cross-domain settings under vue through a piece of code below

1. Cross-domain issues are often involved in vue development. In fact, we have files for setting cross-domain requests in vue cli.

2. When cross-domain requests cannot be made, we can modify the dev: {} part of the index.js under the config folder under the project.

Dev: {env: require ('. / dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath:' /', proxyTable: {'/ api': {target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: {' ^ / api':''} / / CSS Sourcemaps off by default because relative paths are "buggy" / / with this option, according to the CSS-Loader README / / (https://github.com/webpack/css-loader#sourcemaps) / / In our experience, they generally work as expected, / / just be aware of this issue when enabling this option CssSourceMap: false}

Set target to the domain name we need to access.

3. Then set the global properties in main.js:

Vue.prototype.HOST ='/ api'

4. At this point, we can use this domain name globally, as follows:

Var url = this.HOST +'/ movie/in_theaters' this.$http.get (url). Then (res = > {this.movieList = res.data.subjects;}, res = > {console.info ('call failure');}); at this point, the study on "how to solve cross-domain routing conflicts in vue" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.