iView-admin2.0

目录结构：

├── config  开发相关配置
├── public  打包所需静态资源
└── src
    ├── api  AJAX请求
    └── assets  项目静态资源
        ├── icons  自定义图标资源
        └── images  图片资源
    ├── components  业务组件
    ├── config  项目运行配置
    ├── directive  自定义指令
    ├── libs  封装工具函数
    ├── locale  多语言文件
    ├── mock  mock模拟数据
    ├── router  路由配置
    ├── store  Vuex配置
    ├── view  页面文件
    └── tests  测试相关

一 入口文件

public/ （存放主入口文件 index.html）

image.png
index.html 中有id为app的DOM元素，这是vue的挂载元素
<div id="app"></div>
全局配置文件vue.config.js
包括项目的

• 打包配置
• 发布的网址IP配置

 devServer: {
    port: 8089, //项目的发布端口，如果不指定，默认为8080
    proxy: 'http:// localhost:3000' //调用后台接口的地址
  }

• 调用后台接口的IP配置

一 打包及配置

使用命令npm run
首先查看本项目的WebPack包的本地安装

PS E:\iView-admin>  npm ls webpack
iview-admin@2.0.0 E:\iView-admin
`-- @vue/cli-service@3.0.1
  `-- webpack@4.17.0

可见webpack安装在E:\iView-admin\node_modules\@vue\cli-service\路径下

打开webpack.config.js

// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.
let service = process.VUE_CLI_SERVICE
if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

打开Service.js

有一行代码const { defaults, validate } = require('./options')可见webpack的打包配置在option文件

image.png

在Service.js同目录下查找options.js，可见打包的用户配置

image.png

baseUrl: '/',// project deployment base:项目部署基地地址
outputDir: 'dist',// where to output built files：在哪里输出构建的文件
assetsDir: '',// where to put static assets (js/css/img/font/...) ：在哪里存放项目静态资源，默认在在js文件下存放js文件，css文件下存放css样式文件，img文件下存放图片资源，font文件下存放字体文件
indexPath: 'index.html', // filename for index.html (relative to outputDir)打包后生成的主入口文件，相对于outputDir的路径
filenameHashing: true,: // whether filename will contain hash part:文件名是否包含哈希部分
runtimeCompiler: false, // boolean, use full build?
transpileDependencies: [/* string or regex */],// deps to transpile
productionSourceMap: !process.env.VUE_CLI_TEST, // sourceMap for production build?
// use thread-loader for babel & TS in production build:在生产构建中使用babel & TS的线程加载器
// enabled by default if the machine has more than 1 cores:默认情况下，如果机器有超过1个内核，则启用
parallel: hasMultipleCores(),

// #2110
// https://github.com/nodejs/node/issues/19022
// in some cases cpus() returns undefined, and may simply throw in the future
function hasMultipleCores () {
  try {
    return require('os').cpus().length > 1
  } catch (e) {
    return false
  }
}

pages: undefined, // multi-page config:多页面配置
crossorigin: undefined,
// subresource integrity
integrity: false,
css: {
// extract: true,
// modules: false,
// localIdentName: '[name][local][hash:base64:5]',
// sourceMap: false,
// loaderOptions: {}
},
lintOnSave: true,// whether to use eslint-loader
devServer配置：
devServer: {
/*
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
*/
}
})