Vue二级目录部署多环境打包部署（二）
2024-05-07 04:21:20
如果是Vue-cli2的可以看我的上一篇文章：Vue二级目录部署&多环境打包部署（一）
我们的域名一般都是www.xxx.com，可是我们想实现www.xxx.com/aaa 或者 www.xxx.com/bbb怎么办呢？这就是我们今天要说的内容，部署到二级目录
1）在根目录创建 .env.xxx 文件，vim命令
//例如 .env.development文件，默认执行 npm run dev 会加载这个文件，下边有讲到
//step:1 创建文件，已有是打开该文件
vim .env.development
//step:2 进入编辑模式
按键盘 英文 i
//step:3 输入你要写的内容，例如：
VUE_APP_APIPATH = 'tapiA'
//step:4 退出编辑模式
按键盘 esc
//step:5 保存内容 : 是英文状态
:wq | 保存 :q! |不保存
//step:6 一切顺利，你会看到根目录出现 .env.development 文件
//step:7当然有的电脑会隐藏 .文件，可以执行如下命令
ls -a
2） 根据环境需要，创建多个 .env.xxx文件
//.env.development
VUE_APP_APIPATH = 'tapiA'// .env.developmentB
VUE_APP_APIPATH = 'tapiB'
VUE_APP_BASE_URL ='testB'//.env.production
VUE_APP_APIPATH = 'www'//.env.testA
VUE_APP_APIPATH = 'tapiA'
NODE_ENV = 'production'//.env.testB
VUE_APP_APIPATH = 'tapiB'
NODE_ENV = 'production'
VUE_APP_BASE_URL ='testB'
3）修改根目录package.json 文件
"private": true,
"scripts": {"dev": "vue-cli-service serve","devB": "vue-cli-service serve --mode developmentB","build": "vue-cli-service build --mode testA","buildB": "vue-cli-service build --mode testB","prod": "vue-cli-service build"
}
4）在根目录创建文件 vue.config.js文件
const path = require('path');function resolve (dir) {return path.join(__dirname, dir)
}
//自动获取设备IP地址，并打开默认浏览器
const address = require('address');
const localhost = address.ip() || 'localhost';
//根据环境，加载不同css变量文件，不需要删除 sassData
let sassData =`@import "@/assets/css/common.scss";@import "@/assets/css/testA.scss";`;
if(process.env.VUE_APP_BASE_URL =='testB'){sassData = `@import "@/assets/css/common.scss";@import "@/assets/css/testB.scss";`
}module.exports = {/** 区分打包环境与开发环境* process.env.NODE_ENV==='production' (打包环境)* process.env.NODE_ENV==='development' (开发环境)*/publicPath: `/${process.env.VUE_APP_BASE_URL || 'testA'}/`, // 构建好的文件输出到哪里outputDir: process.env.VUE_APP_BASE_URL || 'testA',// 打包文件名称assetsDir :'static',lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-onlyruntimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖transpileDependencies: [/* string or regex */], // 是否为生产环境构建生成sourceMap?productionSourceMap: false, /* 调整内部的webpack配置. 设置引用路径变量*例如:import {xxFn} from 'src/api' 可以改为 import {xxFn} from '$api'*/chainWebpack: (config) => { config.resolve.alias.set('$common',resolve('src/commons')).set('$xbj',resolve('src/views/xbj')).set('$api',resolve('src/api'))},configureWebpack : {// output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】// filename: path.posix.join('static',`js/[name].[hash].js`),// chunkFilename: path.posix.join('static',`js/[name].[hash].js`)// },}, css: {// 将组件内部的css提取到一个单独的css文件（生产环境:true 开发、测试环境：false）// 也可以是传递给 extract-text-webpack-plugin 的选项对象extract: process.env.NODE_ENV==="production", // extract: true, // 允许生成 CSS source maps?sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }loaderOptions: {sass :{data:sassData}}, modules: false}, parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwapwa: {}, // configure webpack-dev-server behaviordevServer: {open: process.platform === "darwin",disableHostCheck: false,host: localhost,port: 8088,https: false,hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxyproxy: null // string | Object// before: app => {}}, // 第三方插件配置pluginOptions: {// ...}
};5）动态设置api路径
src文件下创建api文件，新建baseUrl.js 、config.js 、index.js 三个文件
/*
*baseUrl.js
*/
let host = `https://${process.env.VUE_APP_APIPATH}.labifenqi.com/`,ORDER = 'order';
export {host,ORDER}/*
*config.js
*/
import axios from 'axios'
import {host} from './baseUrl';
axios.defaults.timeout = 30000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
//配置接口地址
axios.defaults.baseURL = host;//请求前拦截
axios.interceptors.request.use((config)=>{return config
});//请求后后拦截
axios.interceptors.response.use((res) => {return res
});//请求前
export function fetch(url, params,type) {return new Promise((resolve, reject) => {if(type=='post'){axios.post(url, params).then(response => {resolve(response.data);}, err => {reject(err);}).catch((error) => {reject(error)})} else if(type == 'get'){axios.get(url,{params}).then(response => {resolve(response.data);}, err => {reject(err);}).catch((error) => {reject(error)})}})
}/*
*index.js
*/
import {fetch} from './config';
//ORDER 是根据 baseUrl 文件定义的变量随便写的，可根据自己需求设置
import {ORDER} from './baseUrl';export default {getOrderList(params){return fetch(`${ORDER}/list`,params,'get')}
}
6）不需要根据环境，变换样式可以跳过
创建多个全局scss文件，对应步骤4 中css设置部分 testA.scss 、testB.scss
//assets/css/testA.scss
$urlPath:'/testA';//assets/css/testB.scss
$urlPath:'/testB';
Vue二级目录部署多环境打包部署（二）相关推荐
- vue项目打包部署linux_Vue项目打包部署到Nginx服务器
"随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能:本文将带你学习vue项目部署及遇到的各种坑." 关于vue项目部署不得不提的是配置文件vue.config. ...
- 【部署】SpringBoot 打包部署/共享依赖包（分布式开发集中式部署微服务）精简jar包
精简jar包 将项目跟第三方依赖分开 [部署]SpringBoot 打包部署/共享依赖包(分布式开发集中式部署微服务) 1 修改pom <build><plugins>< ...
- npm run build生产环境打包部署
1.npm run build打包成功后,会在dist目录下生成index.html和static文件夹,将dist下所有文件复制到你需要的目录下. 2.配置nginx,以下为简单配置: server ...
- mysql集群异地部署_linux 环境下 部署mysql 集群
概述 环境描述:适用于新环境部署 安装目录:/data/mysql 数据目录:/data/mysqldata 端口号 :3306 socket :/data/mysqldata/mysql.sock ...
- springboot项目打成jar包和war包，并部署（快速打包部署）
War和Jar的区别: 通过jar运行实际上是启动了内置的tomcat,所以用的是应用的配置文件中的端口 通过war直接部署到tomcat之后,内置的tomcat就不会启用,所以相关配置就以安装的to ...
- vue cli根据不同的环境打包
2019独角兽企业重金招聘Python工程师标准>>> 一.安装cross-env npm install cross-env --save-dev 跨平台地设置及使用环境变量,解决 ...
- 华为云服务-应用部署3-前端组件部署
文章目录 前言 前端组件部署 一.创建前端组件 步骤一 . 进入应用列表 步骤二. 进入应用 步骤三 . 选择组件列表 步骤四 . 新增组件 步骤五. 选择 web容器 步骤六 .填写组件名称及部署包 ...
- 华为云服务-应用部署4-后端组件部署
文章目录 前言 后端组件部署 一.创建后端组件 步骤一 .进入应用列表 步骤二.进入应用 步骤三 .选择组件列表 步骤四 .新增组件 步骤五. 选择 微服务 步骤六 .选择Java运行时 步骤七.微服 ...
- vue项目nginx部署子目录_vue 多项目部署---二级目录
新项目:同一域名下部署多个vue项目, 根目录vue项目不需要按下面的方式进行打包部署 https://www.bitedit.com/ 下面三个项目以二级目录部署 https://www.bited ...
最新文章
- C语言中整型在计算机中的存储
- C++14尝鲜：Generic Lambdas（泛型lambda）
- IKE IPSEC ×××
- 静态链表（代码、分析、汇编）
- linux 终端必须退出 history才会记录吗,Linux随笔 - linux 多个会话同时执行命令后history记录不全的解决方案【转载】...
- 在PS中如何进行图文互排，且层的使用……
- LSTMs和递归神经网络的初学者指南
- [Xcode 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)
- html十Css十Js暴风影音,word html,word转html样式
- NumberFormat 的使用
- 北理校园网省流攻略之下载篇
- Linux命令-su-用户
- IDEA类和方法注释模板设置
- TI Sitara系列AM64x核心板（双核ARM Cortex-A53）软硬件规格资料
- 一级计算机考上安装电脑桌面,仅花190元 轻松给本本升级触摸屏(多图)
- DELL SCv3020存储日常运维
- P3400 仓鼠窝 （单调栈 dp O（n*m
- 经典差动放大器应用电路详解
- Android：下载图片
- MPG格式(歌曲) 和 MPEG格式的区分