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

阳光穿透心脏的1/2处 2022-10-05 12:59 143阅读 0赞

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

完整实例：[http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu]

来自 “开源世界 ” ，链接：[https://ym.baisou.ltd/post/711.html][https_ym.baisou.ltd_post_711.html]，如需转载，请注明出处，否则将追究法律责任。

[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[https_ym.baisou.ltd_post_711.html]: https://ym.baisou.ltd/post/711.html