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.项目目录结构


目录
打赏
0
0
0
0
13
分享
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
204 0
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
172 17
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
89 1
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
39 1
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
106 0
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
49 0
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1159 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
378 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
245 77
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问