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 err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.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: true
      chunksSortMode: 'dependency'
    }),
    ......

    // copy custom static assets
    new 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').BundleAnalyzerPlugin
  webpackConfig.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.assetsRoot
  outputPublicPath = 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: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    useEslint: true,
    showEslintErrorsInOverlay: false,
    ......
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    ......
  },

  test: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist-test/index.html'),
    // Paths
    assetsRoot: 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 cores
    parallel: require('os').cpus().length > 1,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // 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-cli跑项目的命令：
 
npm  run serve 是不压缩文件，直接加载源码，并且此时的process.env.NODE_ENV是 development
 
npm run build   命令会打包代码，并且此时的process.env.NODE_ENV是 production
 
因此在发送请求的时候通过process.env.NODE_ENV就能很好的区分要请求的后端接口路径
 
但是最近遇到一个问题，我想要打包之后的代码分成测试环境和生产环境，但是通过npm run build打包之后的process.env.NODE_ENV统一都是production，就无法区分了，小朋友你是否有很多问号，接下来就说一下我的解决方案八
 
 
 
1.在package.json中，添加一句打包到测试环境的命令
 
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "test": "vue-cli-service build --mode test",
  },
 
2.在根目录创建.env.test和.env.build文件（文件名的后缀要和package.json中配置mode的一样，开头统一为.env），增加变量VUE_APP_TITLE，注意变量名必须是VUE_APP_开头才可以
 
.env.build
 
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
 
.env.test 这里写NODE_ENV 是production是为了让test环境打包之后的结果和production一致
 
NODE_ENV = 'production'
VUE_APP_TITLE = 'test'
 
3.以上两步环境打包就已经配置好了，接下来是运行命令，分别执行npm run build 和 npm run test，并打印出process.env.VUE_APP_TITLE，就能看到不同的打包命令生成的process.env.VUE_APP_TITLE是不一样的
 
4.根据process.env.VUE_APP_TITLE区分请求接口的地址
 
let api = "https://api.development.yazhishaw.com"; // 默认不打包请求开发环境的接口
console.log("env", process.env.VUE_APP_TITLE);

if (process.env.VUE_APP_TITLE === "production") { // production环境请求生产环境接口
  api = "https://api.production.yazhishaw.com";
} 
else if (process.env.VUE_APP_TITLE === "test") { // test环境请求测试环境接口
  api = "https://api.test.yazhishaw.com";
} 
 
5.然后就可以调用不用环境的接口了，比如：
 
// 根据省市获取医院
export async function getAreaSearchApi(query = {}) {
  const resp = await axios.get(
    `${api}/national-hospital/search`,
    {
      params: query,
    }
  );
  return resp.data;
}
 
 

1：按F1或ctrl+shift+p打开命令窗口
2：输入snippet，选择 “首选项：打开用户代码段”
3：输入vue，如果列表中存在Vue，可直接点击打开vue.json设置文件，如果列表中不存在Vue，按第4步做，如果Vue已存在，直接跳到第9步
4：安装插件VueHelper
5：安装插件vetur
6：文件-首选项-用户设置，打开设置文件， 设置：
"files.associations": {
        "*.vue": "vue"

    }
7：重启 VS Code
8：重新启动 VS Code 后，从第1步再来一遍，应该能跳到第9步
9：在已打开的vue.json文件中粘贴
"Print to vue-template": {
 "prefix": "vue",
 "body": [
 "<template>",
 "\t<div>\n\t\t$1",
 "\t</div>",
 "</template>\n",
 "<script>",
 "\texport default {",
 "\t\tdata () => ({\n",
 "\t\t}),",
 "\t\tcomponents: {\n",
 "\t\t}",
 "\t}",
 "</script>\n",
 "<style>\n\t",
 "</style>"
 ],
 "description": "vue 模板代码片段"

}
10：保存文件，打开任意vue类型文件，输入“vue”，回车直接显示之前设置的代码片段

学完vue使用了element-ui 有没有想自己封装一个ui库 不求多好看，只求学习一个技能或者一个知识点，那我可以帮到你，如果你喜欢请点个赞再走吧。
 小提示 千万别在props子组件里面直接改父组件的值 需要data过渡赋值一下
 分几步
 第一步是注册npm账号 这个自行搜索
 第二步是自己封装一个组件
 
 这张图
 
是一个ui组件库基本的结构
 publishedliu 是组件库的名字 这个名字的文件夹下面
 包含一个src 一个package.json文件
 
这是用来解释main执行index.js发生了什么 看到这可能迷糊别急 这是解释json里面的main键值对的意思
 
import Button from 'publishedliu'
Vue.use(Button)//Button其实是导出了install与Button是组件Checkbox也是
执行use的时候 其实是把所有的外部组件全部定义为全局组件 通过install方法
 
index.js文件
 
import Button from './components/button/index';
import Checkbox from './components/Checkbox/index';
const components = [
  Button,
  Checkbox,
];
const install = function(Vue, opts = {}) {//vue插件的用法install
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};//install是默认方式与vue.use()结合
export default {
 install
};
 
{
  "name": "publishedliu",//包的名字
  "version": "1.0.0",//版本 可以 自行修改
  "description": "组件库",//上传成功之后npm库里的提示
  "author": "liuyong-byte <1256230450@qq.com>",//是你创建npm账号的邮箱
  "private": false,//这个一定改成false 用于上传npm的时候
  "main": "./src/index.js",//是执行文件夹
  "files": [//上传组件库必须要的文件
    "src/components/*",//上传这个文件夹下面所有文件
    "src/index.js"//导出ui库的时候执行文件 个人觉得这个月理解容易一些
  ],
  "__npminstall_done": "Wed May 27 2020 10:54:02 GMT+0800 (GMT+08:00)",
  "_from": "publishedliu@1.0.0",
  "_resolved": "https://registry.npm.taobao.org/publishedliu/download/publishedliu-1.0.0.tgz"
}
 
这个是帮助你切换npm镜像与cnpm淘宝使用的
 
1.设置使用淘宝cnpm

npm config set registry https://registry.npm.taobao.org
2.查看是否配置成功，成功后即可直接使用cnpm命令

npm config get registry
3.还原npm仓库

npm config set registry https://registry.npmjs.org
 
组件封装 比如上面的Button组件
 插槽的那一期https://blog.csdn.net/qq_43505774/article/details/106303148
 
<template>
    <button class="L-but" :style="{color:this.fColor,backgroundColor:this.bgColor}" @click="click">
        <slot>按钮</slot>//默认插槽 父组件分发子组件
    </button>
</template>

<script>
export default {
    name:"Button",//这个很重要 很重要 是上面的component.name的参数
    //当你导入组件库之后输入的Button组件 它就会找到这个name进行加载 个人理解
    props:{//这个是父组件传参个子组件
        bgColor:{
            type:String,
            value:"skyblue"
        },
        fColor:{
            type:String,
            value:"white"
        }
        
    },
    data() {
        return {
            
        }
    },
    methods:{
        click:function(e){//这个是子组件与父组件通信
        //通信有很多种 attr libar vue.$emit props options slot vuex provide inject等等
            this.$emit('click自定义随便都可以',e)//当点击子组件的时候 父组件通过click方法获取值 @父组件方法 与click 同名就ok
        }
    }
}
</script>

<style scoped>//这是style作用域 当然了你也可以使用less sass 或者src连接
.L-but{
    border: 1px solid white;
}
</style>
 
现在是上传组件
 在登录之前需要切换为npm 源 而不是淘宝cnpm
 npm login 登录
 输入username password email
 然后没有报错 就npm publish
 可能会报错 json文件的name名字冲突
 如果需要跟换版本号 直接可以在json里面修改 就ok 也可以命令自行搜索
 我认为直接修改方便一点
 
当上传成功 需要等几分钟 cnpm才会映射到 所以先用npm下载
 npm install 包名
 
当你导入ui组件库的时候 它会自动加载执行src 下面的index文件
 把组件库导出来
 然后vue.use成为全局组件
 就 ok了
 
Button 里面的index.js文件内容 也很重要
 
import Button from './button.vue';

/* istanbul ignore next */
// Button.install = function(Vue) {
//   Vue.component(Button.name, Button);
// }; 这个你如果重复写在每一个组件index.js里面 那你没必要
//在src的index里面install循环了

export default Button;