vue cli3.0 怎么配置 后端请求接口域名，区别打包环境及 vue项目域名的问题
vue cli3.0 怎么配置 后端请求接口域名，区别打包环境及 vue项目域名的问题
- 一、接口请求域名配置
-
- 1.env.development和.env.production
- 2.vue.config.js
- 3.package.json添加内容
- 4.axios
- 二、项目域名
-
- 1.vue.config.js配置文件：
- 2.配置域名：
- 3.重启项目
一、接口请求域名配置
1.env.development和.env.production
和src同级建立两个文件
# .env.development 文件内容
NODE_ENV='development'
VUE_APP_MODE='development'
VUE_APP_URL='此为你本地的接口基地址'
# .env.production 文件内容
NODE_ENV='production'
VUE_APP_MODE='production'
VUE_APP_URL='此为你线上的接口基地址'
2.vue.config.js
在src同级建立一个vue.config.js文件
const path = require('path') //导入路径插件
// production 生产环境 development 本地环境
let isProduction = process.env.NODE_ENV == 'production', //判断当前的环境
baseUrl; //定义baseUrl
if (isProduction) {
// 生产环境
baseUrl = process.env.VUE_APP_URL //当前就是生产环境baseUrl的地址
} else {
baseUrl = process.env.VUE_APP_URL //当前就是开发环境baseUrl的地址
}
module.exports = {
publicPath: './', //./：相对路径，history.pushState时避免使用相对路径
// 当前配置就是打包后输出的文件夹，以便区分，所以做如下配置
outputDir: process.env.NODE_ENV == "development" ? "test" : "dist", // 打包生成目录
devServer: {
proxy: { //配置代理代理
'^/api': { // '^/api'别名（你的接口是以什么开头的就更换成什么，例如：^/orrce）
target: baseUrl,
ws: true, // 是否允许跨域
changeOrigin: true
}
},
hot: true, //保存实时刷新
},
css: {
loaderOptions: {
css: {},
scss: {}
}
}
}
3.package.json添加内容
/* 在scripts里面添加如下代码 */
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
// 对应打包命令
npm run build //开发环境
npm run build:test //测试环境
npm run build:prod //生产环境
4.axios
let request = axios.create({
baseURL: process.env.VUE_APP_URL,
responseType: "json",
timeout: 60000,
});
二、项目域名
1.vue.config.js配置文件：
module.exports = {
// 基本路径 baseURL已经过时
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
disableHostCheck: true,
host: 'www.test.com',//如果是真机测试，就使用这个IP
port: 1234,
https: false,
hotOnly: false,
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
2.配置域名：
在vue.config.js文件找到 devServer: {}配置这两个参数：
host: 'www.test.com',//自定义域名
port: 1234,//自定义端口
3.重启项目
==>使用域名加端口号访问：http://www.test.com:1234
链接: https://www.jianshu.com/p/1fa46c01bdb2?u_atoken=4a94ebea-1187-4179-af46-7934746fe773&u_asession=01–jNMfnNKhtgOS_Ny0H707zAGSAPwmHe0vH1QXPhABd7Tb7m2VUBofgY7GrB1YCtX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K8luo9VZV2F3EswgHUcaJR1MKWrbBzYAhXhkL4v5_cjQmBkFo3NEHBv0PZUm6pbxQU&u_asig=05MRojxUtFitnx0CfWEL58QfwRPQoypK8kewfEJ8cTUrTutGMEHJd37iJWoD56BzGhT_RbyNIjL6h6R1WdsYDa8-0Cg4Z-clXDPW7NC6UnW5CFQIZUXetVf2F20XIyH9nvwI2hqWq0VnVka5f3vYaptbprdZcYm71nfiD6e-C1-hf9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzeGjIRfDeCWfAoeE9pwssmIdUnxEOdZDduLEDnvu-2BAdf9JIAkyKervFWgmMgV8j-3h9VXwMyh6PgyDIVSG1W8CGArzHqoOC5XUivl9Dr8CSbYsM8OpgUlCxiCwc8zrjpLBJAw30fvgUfGZTh_LdLBzKKVlg0_Pq5pKxzJ6T__QmWspDxyAEEo4kbsryBKb9Q&u_aref=oOGPBwa6cG0EP0RNcbR%2BYeGMx2I%3D
链接: https://blog.csdn.net/shaozhuangGui/article/details/123138493
链接: https://www.jb51.net/article/201369.htm