蝙蝠岛资源网

浅谈Vue-cli 命令行工具分析
网络编程 2025/10/28 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为：

full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.

目录结构：

├── README.md
├── build
│  ├── build.js
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js 
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  └── Hello.vue
│  └── main.js
└── static

config 环境配置

config 配置文件用来配置 devServer 的相关设定，通过配置 NODE_ENV 来确定使用何种模式（开发、生产、测试或其他）

config
|- index.js #配置文件
|- dev.env.js #开发模式
|- prod.env.js #生产模式

index.js

'use strict'
const path = require('path');

module.exports = {
 dev: {

  // 路径
  assetsSubDirectory: 'static', // path：用来存放打包后文件的输出目录
  assetsPublicPath: '/', // publicPath：指定资源文件引用的目录
  proxyTable: {}, // 代理示例： proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]

  // 开发服务器变量设置
  host: 'localhost',
  port: 8080,
  autoOpenBrowser: true, // 自动打开浏览器devServer.open
  errorOverlay: true, // 浏览器错误提示 devServer.overlay
  notifyOnErrors: true, // 配合 friendly-errors-webpack-plugin
  poll: true, // 使用文件系统(file system)获取文件改动的通知devServer.watchOptions

  // source map
  cssSourceMap: false, // develop 下不生成 sourceMap
  devtool: 'eval-source-map' // 增强调试 可能的推荐值：eval, eval-source-map(推荐), cheap-eval-source-map, cheap-module-eval-source-map 详细：https://doc.webpack-china.org/configuration/devtool
 },
 build: {
  // index模板文件
  index: path.resolve(__dirname, '../dist/index.html'),

  // 路径
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',

  // bundleAnalyzerReport
  bundleAnalyzerReport: process.env.npm_config_report,

  // Gzip
  productionGzip: false, // 默认 false
  productionGzipExtensions: ['js', 'css'],

  // source map
  productionSourceMap: true, // production 下是生成 sourceMap
  devtool: '#source-map' // devtool: 'source-map' "htmlcode">



'use strict'
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
});
prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"'
};







build Webpack配置







build
|- utils.js #代码段
|- webpack.base.conf.js #基础配置文件
|- webpack.dev.conf.js #开发模式配置文件
|- webpack.prod.conf.js #生产模式配置文件
|- build.js #编译入口





实用代码段 utils.js







const config = require('../config')
const path = require('path')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    "htmlcode">



'use strict'
const path = require('path');
const utils = require('./utils');
const config = require('../config');

function resolve(dir) {
 return path.join(__dirname, '..', dir);
}

module.exports = {
 context: path.resolve(__dirname, '../'), // 基础目录
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot, // 默认'../dist'
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
  "htmlcode">



'use strict'
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const portfinder = require('portfinder'); // 自动检索下一个可用端口
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); // 友好提示错误信息

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
    // 自动生成了 css, postcss, less 等规则，与自己一个个手写一样，默认包括了 css 和 postcss 规则
  },

  devtool: config.dev.devtool,// 添加元信息(meta info)增强调试

  // devServer 在 /config/index.js 处修改
  devServer: {
    clientLogLevel: 'warning', // console 控制台显示的消息，可能的值有 none, error, warning 或者 info
    historyApiFallback: true, // History API 当遇到 404 响应时会被替代为 index.html
    hot: true, // 模块热替换
    compress: true, // gzip
    host: process.env.HOST || config.dev.host, // process.env 优先
    port: process.env.PORT || config.dev.port, // process.env 优先
    open: config.dev.autoOpenBrowser, // 是否自动打开浏览器
    overlay: config.dev.errorOverlay "htmlcode">



'use strict'
const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

const env = process.env.NODE_ENV === 'production'
 "htmlcode">



'use strict'

process.env.NODE_ENV = 'production'; // 设置当前环境为生产环境
const ora = require('ora'); //loading...进度条
const rm = require('rimraf'); //删除文件 'rm -rf'
const chalk = require('chalk'); //stdout颜色设置
const webpack = require('webpack');
const path = require('path');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');

const spinner = ora('正在编译...');
spinner.start();

// 清空文件夹
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err;
  // 删除完成回调函数内执行编译
  webpack(webpackConfig, function (err, stats) {
    spinner.stop();
    if (err) throw err;
  
  // 编译完成，输出编译文件
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n');

  //error
  if (stats.hasErrors()) {
    console.log(chalk.red(' 编译失败出现错误.\n'));
    process.exit(1);
  }

  //完成
  console.log(chalk.cyan(' 编译成功.\n'))
  console.log(chalk.yellow(
   ' file:// 无用，需http(s)://.\n'
  ))
 })

})







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
Vue-cli,命令行工具,cli命令行,vue,cli命令行

                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
蝙蝠岛资源网 Design By www.hbtsch.com

                        

                            

                                
                                
                                    评论“浅谈Vue-cli 命令行工具分析”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无浅谈Vue-cli 命令行工具分析的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/10/28

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com