解决方案一:nginx代理转发
项目build后,通过nginx代理转发
location / { root D:myprojectmy-vuedist; index index.html index.htm; } location /pyapi { proxy_pass 'http://localhost:5002'; #配置后台服务器 }
解决方案二:通过corss-env,修改相关配置
1.安装:npm install cross-env --save-dev
2.修改各环境下的参数,在 config 目录下添加 test.env.js,并修改dev.env.js, prod.env.js,修改后内容如下
test.env.js
'use strict' module.exports = { NODE_ENV: '"testing"', EVN_CONFIG:'"test"', API_ROOT:'"http://127.0.0.1:5003"' }
dev.env.js
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', EVN_CONFIG: '"dev"', API_ROOT: '"http://127.0.0.1:5002"' })
prod.env.js
'use strict' module.exports = { NODE_ENV: '"production"', EVN_CONFIG:'"prod"', API_ROOT:'"http://127.0.0.1:5000"' }
3.修改 package.json 文件中的 scripts 内容.(NODE_ENV最好都设成 production,因为在 utils.js 只做了production 一种判定)
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "build-test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" },
发布到test环境运行npm run build-test;发布到生产环境运行npm run build-prod;其他环境可根据此做类似配置
4.修改 config/index.js 文件中 build 参数,这里的参数会在 build/webpackage.prod.conf.js 中使用到
build: { // Template for index.html // 添加test prod 环境的配制 prodEnv: require('./prod.env'), testEnv: require('./test.env'), }
5.对 build/webpackage.prod.conf.js 文件进行修改,调整 env 常量的生成方式。
// 个性env常量的定义 // const env = require('../config/prod.env') const env = config.build[process.env.env_config+'Env']
6.修改 build/build.js 文件
删除 process.env.NODE_ENV 的赋值,修改 spinner 的定义,调整后的内容如下:
'use strict' require('./check-versions')() // 注释掉的代码 // process.env.NODE_ENV = 'production' const ora = require('ora') const rm = require('rimraf') const path = require('path') const chalk = require('chalk') const webpack = require('webpack') const config = require('../config') const webpackConfig = require('./webpack.prod.conf') // 修改spinner的定义 // const spinner = ora('building for production...') var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' ) spinner.start()
7.在网络请求处,设置baseUrl
// 设置baseURL axios.defaults.baseURL = process.env.API_ROOT