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


相关文章
|
23小时前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
7 1
|
1天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
8 0
|
1天前
|
JavaScript
vue知识点
vue知识点
10 0
|
1天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
1天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
1天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
5 0
|
1天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
1天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
1天前
|
JavaScript
vue封装svg
vue封装svg
7 0

相关实验场景

更多