Vue cli3 打包build 区分测试环境和正式环境 |
您所在的位置：网站首页 › iapp打包测试和正式打包有什么区别 › Vue cli3 打包build 区分测试环境和正式环境 |
Vue cli3 打包build 区分测试环境和正式环境
|
Vue cli3 打包build 区分测试环境和正式环境
第一种：
比较简单的方法，没有过多的配置，主要是打包时比较简单的方法，没有过多的配置，主要是打包时比较简单的方法，没有过多的配置，主要是打包时 简单区分开发环境（development）和发布环境（production）请求的URL简单区分开发环境（development）和发布环境（production）请求的URL简单区分开发环境（development）和发布环境（production）请求的URL util/baseUrl.js let baseUrl= ""; //这里是一个默认的url，可以没有 switch (process.env.NODE_ENV) { case 'development': baseUrl = "http://192.168.1.105:8080/admin/v1/" //开发环境url break case 'production': baseUrl = "https://www.baidu.com/admin/v1/" //生产环境url break } export default baseUrl 复制代码 main.js import baseUrl from './util/baseUrl.js' import axios from 'axios' axios.defaults.baseURL= baseUrl;// 设置请求根路径 复制代码如果要修改打包后的文件名，则修改vue.config.js中的outputDir:′你想要的文件名′即可如果要修改打包后的文件名，则修改vue.config.js 中的outputDir: '你想要的文件名'即可如果要修改打包后的文件名，则修改vue.config.js中的outputDir:′你想要的文件名′即可 vue.config.js module.exports = { publicPath: './', // 相对于 HTML 页面（目录相同）部署应用包时的基本 URL outputDir: 'My-admin',//生成的生产环境构建文件的目录 ,默认是dist // assetsDir:'',//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 // indexPath:'index.html',// 指定生成的 index.html 的输出路径 (相对于 outputDir) // filenameHashing:true,//生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,false 来关闭文件名哈希 devServer: { port: 8080, // host:'localhost', // open:true, //浏览器自动访问 contentBase: 'src',//指定托管的根目录 hot: true,//启动热更新 第一步webpack只用这一步 // proxy: 'http://192.168.1.104:8080' //代理 proxy: { '/admin/v1': {//代理 target: 'http://192.168.1.104:8080/', //API服务器的地址 // ws: true, //代理websockets changeOrigin: true,//设置true 代表跨域访问 // secure: false, // 如果是https接口，需要配置这个参数 // pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc' // '^/api': '' } } }, 复制代码 第二种： 1.首先：通过为.env文件增加后缀来设置某个模式下特有的环境变量通过为 .env 文件增加后缀来设置某个模式下特有的环境变量通过为.env文件增加后缀来设置某个模式下特有的环境变量 通过传递−−mode选项参数为命令行覆写默认的模式通过传递 --mode 选项参数为命令行覆写默认的模式通过传递−−mode选项参数为命令行覆写默认的模式 在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod） 文件命名：.env.dev,.env.test,.env.prod文件命名： .env.dev , .env.test , .env.prod文件命名：.env.dev,.env.test,.env.prod 接下来是不同文件里面的代码情况， .env.dev NODE_ENV = 'development' VUE_APP_CURRENTMODE = 'dev' VUE_APP_BASEURL = '本地开发api地址' 复制代码 .env.test NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'test' VUE_APP_BASEURL = '测试环境api地址' 复制代码 .env.prod NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'prod' VUE_APP_BASEURL = '正式环境api地址' 复制代码 2.修改package.json 脚本： |
【本文地址】
今日新闻 |
推荐新闻 |