vue多页面系统配置步骤

简介: vue多页面系统配置步骤

1.打包命令(区别生产还是开发环境)


安装 cross-env


配置的变量  可以获取  ` process.env.PROJECT_NAME  `

npm install --save-dev cross-env

配置运行命令

    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "d": "node config/dev.js",
    "b": "node config/build.js",
    "d1": "cross-env PROJECT_NAME=hbhr_gz_corp_ui node config/dev.js",
    "d2": "cross-env PROJECT_NAME=hbhr_gz_center_ui node config/dev.js",
    "d3": "cross-env PROJECT_NAME=hbhr_rs_corp_ui node config/dev.js",
    "d4": "cross-env PROJECT_NAME=hbhr_rs_center_ui node config/dev.js",
    "b1": "cross-env PROJECT_NAME=hbhr_gz_corp_ui node config/build.js",
    "b2": "cross-env PROJECT_NAME=hbhr_gz_center_ui node config/build.js",
    "b3": "cross-env PROJECT_NAME=hbhr_rs_corp_ui node config/build.js",
    "b4": "cross-env PROJECT_NAME=hbhr_rs_center_ui node config/build.js"

2.vue.config.js 配置


主要是配置打包后的文件目录

'use strict'
const path = require('path')
const conf = require('./config/projectConfig')
const projectName = require('./config/project')
function resolve(dir) {
  return path.join(__dirname, dir)
}

const port = process.env.port || process.env.npm_config_port || 8080 // dev port
module.exports = {
  pages: conf.pages,
  publicPath: process.env.NODE_ENV === 'production' ? `/${projectName.name}/` : './',
  outputDir: conf.outputDir,
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
    }
  },
  configureWebpack: conf.configureWebpack,
  chainWebpack(config) {
    // 全局css样式
    config.module
      .rule('scss')
      .oneOfs
      .store.forEach(item => {
        item
          .use('sass-resources-loader')
          .loader('sass-resources-loader')
          .options({
            resources: resolve('src/styles/common/variables.scss') // 文件的路径
          })
          .end()
      })
    // end

    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

3.根目录创建 config (4个)文件夹


build.js
dev.js
project.js
projectConfig.js

build.js 配置了两种打包命令

npm run b1

或者

npm run b 包名
// 下面这行代码
// 拿到命令行里参数,比如执行(npm run b projectA),这个时候projectName就等于projectA
// 有了这个变量,就可以根据这个名字来读取projectConfig里面的配置了
let projectName = process.argv[2]
// 使用d1/d2/d3/d4 快速启动
if (process.env.PROJECT_NAME) {
  projectName = process.env.PROJECT_NAME
}

// 下面两行代码 获取projectName后把保存起来,写入到project.js里,方便其它js文件里引入使用
const fs = require('fs')
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)

// 下面两行代码继续执行命令(npm run build),执行默认命令开始进行打包
const exec = require('child_process').execSync
exec('npm run build', { stdio: 'inherit' })

dev.js(同样配置了两种打包命令)

npm run d1

或者

npm run d 包名
let projectName = process.argv[2]
const fs = require('fs')

// 使用d1/d2/d3/d4 快速启动
if (process.env.PROJECT_NAME) {
  projectName = process.env.PROJECT_NAME
}

fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)

const exec = require('child_process').execSync
exec('npm run dev', { stdio: 'inherit' })

project.js 不用管,自动生成


projectConfig.js (主要的配置文件)

const projectName = require('./project')
const path = require('path')
// 项目名称
const appList = {
  hbhr_gz_corp_ui: 'hbhr_gz_corp_ui', // 工资单位端前端
  hbhr_gz_center_ui: 'hbhr_gz_center_ui', // 工资中心端前端
  hbhr_rs_corp_ui: 'hbhr_rs_corp_ui', // 事管单位端前端
  hbhr_rs_center_ui: 'hbhr_rs_center_ui' // 事管中心端前端
}

// 生成打包配置函数
function configGenerate(project) {
  return {
    pages: {
      index: {
        entry: `src/projects/${project}/main.js`,
        template: 'public/index.html',
        filename: 'index.html'
      }
    },
    outputDir: `dist/${project}/`,
    publicPath: `/${project}/`,
    configureWebpack(config) {
      config.entry.app = ['babel-polyfill', `./src/projects/${project}/main.js`]
      Object.assign(config.resolve, {
        alias: {
          '$project': resolve(`../src/projects/${project}/`),
          '@': resolve('../src/'),
        }
      })
    }
  }
}

function resolve(dir) {
  return path.join(__dirname, dir)
}

const config = {}
for (const prop in appList) {
  config[prop] = configGenerate(appList[prop])
}
const configObj = config[projectName.name]
module.exports = configObj

4.项目目录结构


相关文章
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
327 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
303 137
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
815 0
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
435 1
|
5月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
273 0
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
289 1
|
8月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
1046 4
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
886 77
|
8月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍