部署电影网到服务器后,本地vue数据加载不了问题

因为部署前把vue页面或组件里到ajax请求路径的http://localhost:3000去掉(即改为服务器(里的web后端程序)可以识别的相对路径)

解决办法:创建一个可以随意把请求路径切换到开发环境或服务器打包环境的工具


一般项目webpack会有两个或多个配置文件,如:

webpack.prod.conf.js  对应线上打包

webpack.dev.conf.js   对应开发环境

使用webpack.DefinePlugin就可以

```

开发环境(webpack.dev.conf.js):

//开发环境下的baseURL

new webpack.DefinePlugin({

  BASE_URL:"'xxxxxxxxx'"

})

线上环境(webpack.prod.conf.js):

//线上环境下的baseURL

new webpack.DefinePlugin({

  BASE_URL:"'xxxxxxxxx'"

})

```

我们只需要在入口文件中写上:axios.defaults.baseURL = BASE_URL;即可。

通过配置了DefinePlugin,那么这里面的标识就相当于全局变量,你的业务代码可以直接使用配置的标识。


注意:这里配置

BASE_URL

属性值的时候要单独给里面的值再加一个引号,否则输出的值不是字符串,所以会报错。

你可能感兴趣的:(部署电影网到服务器后,本地vue数据加载不了问题)