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


相关文章
|
2天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
2天前
Vue3步骤条(Steps)
这是一个基于 Vue2 的步骤条(Steps)组件,支持多种自定义属性,如步骤数组、宽度、大小、垂直显示、标签位置等。通过 `v-model` 可实现步骤的动态切换和点击交互。提供了丰富的样式调整选项,适用于各种场景下的多步骤流程引导。组件内详细展示了如何创建和使用步骤条,并提供了多个示例代码片段。
Vue3步骤条(Steps)
|
1天前
|
资源调度 JavaScript 前端开发
Vue Router 的使用方式是什么
【8月更文挑战第30天】Vue Router 的使用方式是什么
8 2
|
2天前
|
JavaScript
Vue多图组合走马灯
这篇文章介绍了如何在Vue框架中创建一个多图组合的走马灯组件,允许自定义滑动间隔和图片区域宽度,以展示多个图片。
Vue多图组合走马灯
|
1天前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
|
1天前
|
JavaScript 前端开发 UED
揭秘Vue.js高效开发:Vue Router如何让单页面应用路由管理变得如此简单?
【8月更文挑战第30天】随着Web应用复杂性的增加,单页面应用(SPA)因出色的用户体验和高效的页面加载性能而备受青睐。Vue.js凭借简洁的语法和灵活的组件系统成为构建SPA的热门选择,其官方路由管理器Vue Router则简化了路由管理。本文通过实战示例介绍如何利用Vue Router实现高效的SPA路由管理,包括命名路由、动态路由及其核心优势。
|
1天前
|
JavaScript API 网络架构
vue 动态路由使用
【8月更文挑战第30天】vue 动态路由使用
10 0
|
1天前
|
JavaScript
vue知识点
vue知识点
6 0
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
4天前
|
存储 JavaScript 前端开发
Vue应用瘦身秘籍:揭秘Vuex如何重塑你的应用状态,让复杂变简单!🔥
【8月更文挑战第27天】在开发Vue应用时,随着应用规模的增长,组件间通信与状态共享问题日益复杂。Vuex作为Vue官方推荐的状态管理库,提供了集中式存储仓库来管理组件的共享状态,简化状态跟踪与组件通信。Vuex的核心概念包括state(存储状态数据)、mutations(同步修改state)和actions(处理异步操作)。通过一个购物车应用示例展示了如何定义state、mutations及actions,以及如何在Vue组件中使用这些状态管理功能。掌握Vuex有助于提高应用的健壮性和可维护性。
29 0