vue多页面系统配置步骤

2024-04-16 20

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

文章标签：

JavaScript