一、接口请求域名配置

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='此为你线上的接口基地址'

1
2
3
4
5
6
7
8
9
10

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: {}
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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"
 },

1
2
3
4
5
6
7
8
9

// 对应打包命令
	npm run build //开发环境
	npm run build:test //测试环境
	npm run build:prod //生产环境
1
2
3
4

4.axios

let request = axios.create({
 baseURL: process.env.VUE_APP_URL,
 responseType: "json",
 timeout: 60000,
});

1
2
3
4
5
6

二、项目域名

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: {
  // ...
 }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2.配置域名：

在vue.config.js文件找到 devServer: {}配置这两个参数：

 host: 'www.test.com',//自定义域名
 port: 1234,//自定义端口
1
2

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