vue自定义配置运行run命令

  • 1、vuecli3以下
    • package.json
    • build/build.js
    • webpack.prod.conf.js
    • build/utils.js
    • build/webpack.base.conf.js
    • build/vue-loader.conf.js
    • config文件夹
      • index.js
    • vuecli3以下打包流程
    • 新增npm run test指令
      • 新增文件
      • 修改文件
        • package.json
        • build/utils.js
    • vuecli3以下自定义webpack打包指令小结
  • 2、vuecli3以上
    • vue.config.js
    • 新增npm run test指令
      • 新增文件
      • 修改文件
    • vuecli3以上自定义webpack打包指令小结

vue运行根据npm和yarn不同有不同的指令，不过大同小异，常用的一般只有本地运行和线上打包指令，vuecli3以下的为 npm run dev（本地运行）、npm run build（线上打包）；vuecli3及以上的为 npm run serve（本地运行）、npm run build（线上打包）。
但是经常也会遇到一种情况：线上也会有不同的环境，常用的有开发环境、测试环境、UAT环境、正式生产环境等等，不同的线上环境最常见的区别往往是访问路径不同，请求地址不同，当然这些问题其实可以用Nginx反向代理解决，但还有一些特殊情况，比如某个功能只在正式生产环境开放，后端不方便用代码，那么此时就需要前端获取当前打包的环境，这就是自定义配置运行命令的意义所在，当你运行不同的指令生成不同环境的webpack包，必定可以获取到当前包的环境，可以在前端用代码控制实现不同环境有不同的显示操作
vue自定义配置运行命令有两种，一种是vuecli3以下，此时webpack配置文件在本地，可以根据修改本地webpack配置文件进行自定义；一种是在vuecli3以上，此时webpack配置在服务器上，不能通过修改本地配置文件来进行自定义，则需要通过新建vue.config.js和.env.XXX文件来进行自定义，下面我会分别记录操作方法

1、vuecli3以下

此时webpack配置文件在本地，修改即可，只要知道webpack的打包流程，引用了哪些文件，然后就可以据此新增修改
打包第一个文件肯定是package.json，每一个指令的执行都定义在此

package.json

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","unit": "jest --config test/unit/jest.conf.js --coverage","e2e": "node test/e2e/runner.js","lint": "eslint --ext .js,.vue src test/unit test/e2e/specs","test": "node build/test.js","build": "node build/build.js"},

首先看默认的npm run build打包，首先会执行build文件夹下的build.js文件

build/build.js

'use strict'
require('./check-versions')()process.env.NODE_ENV = 'production'
...
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')const spinner = ora('building for production...')
spinner.start()rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {if (err) throw errwebpack(webpackConfig, (err, stats) => {spinner.stop()if (err) throw errprocess.stdout.write(stats.toString({colors: true,modules: false,children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.chunks: false,chunkModules: false}) + '\n\n')if (stats.hasErrors()) {console.log(chalk.red('  Build failed with errors.\n'))process.exit(1)}console.log(chalk.cyan('  Build complete.\n'))console.log(chalk.yellow('  Tip: built files are meant to be served over an HTTP server.\n' +'  Opening index.html over file:// won\'t work.\n'))})
})

主要关注这两条

const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

这说明build.js打包依赖config文件夹和webpack.prod.conf.js文件
下面我们再看看webpack.prod.conf.js文件

webpack.prod.conf.js

'use strict'const utils = require('./utils')
......
const config = require('../config')
......
const baseWebpackConfig = require('./webpack.base.conf')
......const env = process.env.NODE_ENV === 'test'? require('../config/test.env'): require('../config/prod.env')const webpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true,usePostCSS: true})},devtool: config.build.productionSourceMap ? config.build.devtool : false,output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},plugins: [......new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),new HtmlWebpackPlugin({filename: process.env.NODE_ENV === 'testing'? 'index.html': config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: truechunksSortMode: 'dependency'}),......// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}])]
})if (config.build.productionGzip) {const CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}module.exports = webpackConfig

因为篇幅原因,我把一些注释和与打包无关的代码删掉了，这里重点关注三条

const utils = require('./utils')const config = require('../config')const baseWebpackConfig = require('./webpack.base.conf')

这说明webpack.prod.conf.js依赖config文件夹、webpack.base.conf.js文件和utils.js文件
我们再来看看build/utils.js文件

build/utils.js

'use strict'
const path = require('path')
const config = require('../config')
......exports.assetsPath = function (_path) {let assetsSubDirectory = ''if (process.env.NODE_ENV === 'production') {assetsSubDirectory = config.build.assetsSubDirectory} else if (process.env.NODE_ENV === 'test') {assetsSubDirectory = config.test.assetsSubDirectory} else {assetsSubDirectory = config.dev.assetsSubDirectory}return path.posix.join(assetsSubDirectory, _path)
}......

可以看出utils.js依旧依赖config文件夹

build/webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')......let outputPath = config.build.assetsRoot
let outputPublicPath = ''
if (process.env.NODE_ENV === 'production') {outputPublicPath = config.build.assetsPublicPath
} else if (process.env.NODE_ENV === 'test') {outputPath = config.test.assetsRootoutputPublicPath = config.test.assetsPublicPath
} else {outputPublicPath = config.dev.assetsPublicPath
}module.exports = {context: path.resolve(__dirname, '../'),entry: {app: ['babel-polyfill', './src/main.js']},output: {path: outputPath,filename: '[name].js',publicPath: outputPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},module: {rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},......]},node: {setImmediate: false,dgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty'}
}

可以看出webpack.base.conf.js除了依赖config文件夹和utils.js文件还有一个vue-loader.conf.js文件

build/vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test')let sourceMapEnabled = ''
if (process.env.NODE_ENV === 'production') {sourceMapEnabled = config.build.productionSourceMap
} else if (process.env.NODE_ENV === 'test') {sourceMapEnabled = config.test.productionSourceMap
} else {sourceMapEnabled = config.dev.cssSourceMap
}module.exports = {loaders: utils.cssLoaders({sourceMap: sourceMapEnabled,extract: isProduction}),cssSourceMap: sourceMapEnabled,cacheBusting: config.dev.cacheBusting,transformToRequire: {video: ['src', 'poster'],source: 'src',img: 'src',image: 'xlink:href'}
}

vue-loader.conf.js常规引用config文件夹和utils.js文件,就不单独讨论了

config文件夹

config文件夹下有多个文件，一般初始化至少有index.js、dev.env.js、prod.env.js，其中dev.env.js和prod.env.js里面是各自的专属配置，本文想要实现的功能就由此类文件来完成，每个文件里都可以配置不同的请求域名（当然也可以用Nginx反向代理），当前环境的标识等等

index.js

index.js里面就是config的常用配置，比如每个环境下的路径、目录、文件名等等配置都由此处配置

'use strict'const path = require('path')module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {},// Various Dev Server settingshost: '0.0.0.0', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, useEslint: true,showEslintErrorsInOverlay: false,......},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: true,......},test: {// Template for index.htmlindex: path.resolve(__dirname, '../dist-test/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist-test'),assetsSubDirectory: 'static',assetsPublicPath: './',......}
}

vuecli3以下打包流程


上图就是vuecli3以下的webpack打包流程，可以看到webpack打包大概就用到这几个文件，当然背后还有更多的依赖，但是我们能控制的就这几个，那么想配置一个新的指令只要按照这个流程新增或者修改对应的文件就可以了，下面我以新增一个npm run test指令为例（因为我已经做完了这个，其实上面贴出来的代码细心的已经看到了）

新增npm run test指令

新增文件

需要新增的文件有build/test.js、build/webpack.test.conf.js、config/test.env.js
新增在我看来是最简单的，只需要照着build的文件复制一份改名，然后把代码里的config.build改为config.test，这里的config.build指的是config文件夹下index.js里的build对象,包含了打包时的一些配置，比如文件名，路径等等

修改文件

需要修改的文件有package.json、build/utils.js、build/webpack.base.conf.js、build/vue-loader.conf.js、config/index.js

package.json

package.json仿照build新增一条指令,运行build/test.js文件

build/utils.js

utils文件需要在以前判断的基础上加上一个test的判断
更改前

const assetsSubDirectory = process.env.NODE_ENV === 'production'? config.build.assetsSubDirectory: config.dev.assetsSubDirectory

更改后

let assetsSubDirectory = ''if (process.env.NODE_ENV === 'production') {assetsSubDirectory = config.build.assetsSubDirectory} else if (process.env.NODE_ENV === 'test') {assetsSubDirectory = config.test.assetsSubDirectory} else {assetsSubDirectory = config.dev.assetsSubDirectory}

build/webpack.base.conf.js、build/vue-loader.conf.js、config/index.js等其他文件参照build/utils，将原本只对production和dev的判断加上一个test的判断

vuecli3以下自定义webpack打包指令小结

1、在package.json新增一条指令
2、根据新增指令在指定位置（通常是build文件夹）新增文件
3、新增config文件夹下自定义配置文件
4、修改config文件夹下index.js文件，新增对自定义配置
5、新增webpack conf文件
6、修改build/utils文件，增加对自定义的判断
7、修改webpack.base.conf.js文件。增加对自定义的判断
8、修改build/vue-loader.conf.js文件，增加对自定义的判断

2、vuecli3以上

此时webpack配置文件不在本地，想要修改打包配置需新建vue.config.js文件，vue.config.js文件和vuecli3以下时config文件夹下的index.js文件一样，保存默认的打包配置，当然如果没有.env.dev和.env.prod也可以新建，这两个.env文件和vuecli3以下时config文件夹下的.env文件一样，目的是保存当前环境下的配置。这几个文件都在vue项目第一级目录下，与src文件夹平级。

vue.config.js

const path = require('path');let outputDir = ''
if (process.env.VUE_APP_CURRENTMODE === 'prod') {// 为生产环境修改配置...outputDir = 'dist';
} else {// 为开发环境修改配置...outputDir = 'dist-test';
}
module.exports = {// 基本路径publicPath: './',// 输出文件目录outputDir,// eslint-loader 是否在保存的时候检查lintOnSave: true,configureWebpack: (config) => {config.entry.app = ["babel-polyfill", "./src/main.js"];if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production';} else {// 为开发环境修改配置...config.mode = 'development';}Object.assign(config, {// 开发生产共同配置resolve: {alias: {'@': path.resolve(__dirname, './src'),'@a': path.resolve(__dirname, './src/api'),'@u': path.resolve(__dirname, './src/utils'),'@p': path.resolve(__dirname, './src/pages'),'@c': path.resolve(__dirname, './src/components'),}}});},// 生产环境是否生成 sourceMap 文件productionSourceMap: true,// enabled by default if the machine has more than 1 coresparallel: require('os').cpus().length > 1,// PWA 插件相关配置// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwapwa: {},// webpack-dev-server 相关配置devServer: {open: process.platform === 'darwin',host: '0.0.0.0',port: 8888,https: false,hotOnly: false,},// 第三方插件配置pluginOptions: {// ...}
};

新增npm run test指令

新增文件

新增.env.test文件，仿照.env.prod新建，NODE_ENV最好和prod一样，为做区分可以配置一个字段如VUE_APP_CURRENTMODE为test与prod区分开，如果需要判断当前环境可以用此字段判别

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'

修改文件

修改vue.config.js，增加对VUE_APP_CURRENTMODE的判断
修改前

const path = require('path');module.exports = {// 基本路径publicPath: './',// 输出文件目录outputDir,......
}

修改后

const path = require('path');let outputDir = ''
if (process.env.VUE_APP_CURRENTMODE === 'prod') {// 为生产环境修改配置...outputDir = 'dist';
} else {// 为开发环境修改配置...outputDir = 'dist-test';
}
module.exports = {// 基本路径publicPath: './',// 输出文件目录outputDir,......
}

vuecli3以上自定义webpack打包指令小结

1、默认需有.env.dev、.env.prod、vue.config.js文件，如无可新建
2、新增.env.test文件
3、修改vue.config.js文件

vue自定义配置运行run命令相关推荐

  1. 解决： Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:本人遇到这个问题是用文中最后一句话解决:" 在组件的样式中记得添加 'scoped' ...

  2. 解决 VUE： 本地运行和服务器上运行样式不一致，run、build 运行时样式有出入

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 我的情况: 我遇到 2 种情况,一个是表格的分页样式有变化.另一个是导航菜单样式有变化. 2. ...

  3. 创建vue项目，vue项目自定义配置

    对于新手来说配置vue项目的各个插件时,总是会出现插件版本和vue框架版本适配问题.这篇文章简单的讲一下vue创建项目时自定义项目插件的配置. 首先我们想要在桌面创建一个新的vue项目. 首先我们找到 ...

  4. vue执行配置选项npm run serve的本质

    vue执行配置选项npm run serve运行开发服务器的本质 目录 vue执行配置选项npm run serve运行开发服务器的本质 一.启动开发服务器.调用"工具链".编译. ...

  5. Vue环境搭建(node安装,环境配置,运行项目)

    Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...

  6. vue项目执行cnpm run dev报错cnpm : 无法加载文件 C:\Users\MEH\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

    在VSCODE中导入vue项目执行cnpm run dev时报错如下: 解决方案: 以管理员身份运行Windows PowerShell(要注意不是cmd) 1.输入set-ExecutionPoli ...

  7. Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置

    Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置

  8. 如何删除vue手脚架创建的自定义配置

    如何删除vue手脚架创建的自定义配置 首先要找到.vuerc这个文件 一般是在C盘 C:\Users\Administrator\ .vuerc 右键,打开方式用VScode打开 将presets这个 ...

  9. vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能

    最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...

最新文章

  1. 白盒测试各种“覆盖”间的拓扑关系及白盒用例常用要求
  2. Uva5009 Error Curves
  3. 转圈显示的Java程序和两矩阵相乘
  4. 二叉树的遍历实现-1（三级）
  5. 如何把网址配置为http和https可以同时访问
  6. loadRunner目录分析二
  7. 实战系列-分布式锁的Redis实现
  8. 微信推送封面尺寸_48张微信朋友圈个性封面图片大全 让来看你朋友圈的人眼前一亮！...
  9. 分析reduce()的原理
  10. java垃圾回收算法
  11. 信息展示类图表设计指南：10个必须遵循的步骤
  12. Error：(list) object cannot be coerced to type 'double'的处理
  13. 二手苹果手机价格查询
  14. 严蔚敏 数据结构（c语言版）c语言实现
  15. 三只松鼠3次方新品魅力何在？
  16. druid.io集群与tranquility对zookeeper的使用（2）
  17. SQL分组查询，结果只取最新记录
  18. Apache Camel中的recipientList和routingSlip的区别？
  19. 二三维一体化平台-FreeXGIS Studio
  20. 迷你摄像百科：摄像模组是什么，有哪些种类与款式

热门文章

  1. 大学计算机上机实验指导与测试pdf,大学计算机基础上机指导与测试-王瑞祥主编.pdf...
  2. c/c++编程日记：用C语言实现消消乐游戏（附源码）
  3. ps中斜切的快捷键，反相快捷键，扁平化banner的思路和设计
  4. 电商API接口爬虫程序，如何取有用数据
  5. do vis是什么意思_flutter什么意思
  6. vue 自定义组件双向数据绑定
  7. android 免费游戏推荐,25款免费Android游戏推荐【3】
  8. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
  9. 小米平板刷android l,小米平板5成为小米史上最强的平板，将补上安卓平板的空白区！...
  10. linux c 下面的动态函数库 libc.so.6