vue脚手架 build-config文件夹（跨域/打包）相关配置

1,跨域解决

点开config文件夹下的index.js文件

找到 proxyTable（英文：代理-表格）下进行配置，如下（路径配置必须绝对路径）

build:{ // production 环境

env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境

index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件

assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径

assetsSubDirectory: 'static', // 编译时输出的二级目录（dist->static）

assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名

productionSourceMap: true, // 是否开启 cssSourceMap

productionGzip: false, // 是否开启 gzip

productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名

},

dev: { // dev 环境

env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境

port: 8080, // 运行测试页面的端口

assetsSubDirectory: 'static', // 编译输出的二级目录

assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名

proxyTable: {

'/xxxx': {

target: 'http://192.168.11.11/xxxxx', // 接口的域名

// secure: false, // 如果是https接口，需要配置这个参数

changeOrigin: true, // 如果接口跨域，需要进行这个参数配置

pathRewrite: {

'^/xxxxxx': '/'

}

},

}, // 需要 proxyTable 代理的接口（可跨域）

cssSourceMap: false // 是否开启 cssSourceMap

}

页面调用

let JAVA2API = 'xxxxx'
    export default {
      name: "CustomerNew",
      data() {
        return {
　　　　　　JAVA2API, 
　　　　} 
　　} 

 

 

 

 

打包配置

一个项目的开发调试过程肯定不止开发环境和生产环境，由于缺少环境常量，我们就常常需要手动修改URL，进而导致如果项目存在多个环境时，多出的环境没办法自动化构建

可以通过webpack进行配置，下面是自己理解的图

 

 

添加env-config.js文件

我们可以利用process对象，获取启动Node.js进程时的命令行参数（process.argv）,匹配当前开发或生产的环境常量挂载到process.env。

env-config.js

/*
 @多环境开发配置 by haibao
 使用方法示例：
 ----打包：
   打包dev环境：npm run build --dev
   打包test环境：npm run build --test
   打包pro环境：npm run build --pro
 ----本地运行：
   本地运行dev环境：npm run dev --dev
   本地运行test环境：npm run dev --test
   无【--xxx】参数，则默认为dev环境：npm run dev
 */
'use strict'

const chalk = require('chalk')
// const path = require('path')
/*
 * 环境列表，第一个环境为默认环境
 * @envName: 指明现在使用的环境
 * @baseUrl: 这个环境下面的api 请求的域名
 * */
const ENV_LIST = [
  {
    // 开发环境
    envName: 'dev',
    baseUrl: '/xxxxx',
  },
  {
    // 测试环境
    envName: 'test',
    baseUrl: '/xxxxx,
  },
  {
    // 生产环境（命令行参数（process.arg）中prod是保留字，所以使用pro）
    envName: 'pro',
    baseUrl: '/xxxxx',
  }
]
// 获取命令行参数: http://nodejs.cn/api/process.html#process_process_argv
//利用process对象，获取启动Node.js进程时的命令行参数（process.argv）,匹配当前开发或生产的环境常量挂载到process.env。
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig, '') : 'dev'
// 没有设置环境，则默认为第一个
const HOST_CONF = HOST_ENV ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把环境常量挂载到process.env方便客户端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log选中的变量
console.log(chalk.green('当前环境对应的常量：'))
console.log(HOST_CONF)

module.exports = {
  HOST_CONF,
  ENV_LIST
}

 

然后分别在webpack.dev.conf.js / webpack.prod.conf.js 配置变量 位置在

plugins：[]下的

new webpack.DefinePlugin方法

如下配置  plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',}), ] 

两个文件配制方法相同

 

然后打开发环境的包就敲 npm run build 

测试环境  npm run build --test

生产环境 npm run build --pro

 

转载于:https://www.cnblogs.com/TLSF/p/10606848.html