一个基于Vue.js进行快速开发的完整系统配置

2022-07-04

@vue/cli是一个基于 Vue.js 进行快速开发的完整系统。

@vue/cli 基于node服务 需要8.9以上版本 可以使用nvm等工具来控制node版本构建于webpack和webpack-dev-server之上

安装

如果已安装旧版 需要先卸载旧版本 :

1 npm uninstall vue-cli -g 
//or 2 yarn global remove vue-cli

任一命令安装全局新包:

1  npm install -g @vue/cli   
2   //or
3  yarn global add @vue/cli
4   //or
5  cnpm global add @vue/cli

查看版本:

vue --version
//or
vue -V

创建项目:

vue create  my-project # 项目名
# Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。  
# 你必须通过   winpty vue.cmd create hello-world   启动这个命令。
# or
npx @vue/cli create appname

创建时会提示 preset 预置项

可以选择默认配置

也可以选择手动配置

Please pick a preset: 
> vue-router base (vue-router, vuex, less, babel, pwa, unit-mocha)  //配置过的预置项(preset)

default (babel, eslint) Manually select features //默认的preset
Manually select features //手动配置需要的preset

在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

同时 现在可以可视化创建项目:

vue ui

命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

webpack 配置

在项目根目录手动创建vue.config.js

导出一个对象 :

module.exports = {
  
}

有些webpack 选项不能直接修改

比如应该修改vue.config.js中的outputDir而不是修改 webpack 中的output.path

基于环境有条件地配置行为,或者想要直接修改配置:

baseUrl 从Vue CLI 3.3 起已弃用,请使用。

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  runtimeCompiler: true,
  assetsDir: 'static',
  productionSourceMap: false, // 生产环境的 source map
  parallel: require('os').cpus().length > 1,
  configureWebpack: config => {
    // 公共配置
    // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      'src': resolve('src/common'),
      'common': resolve('src/views/common'),
      'static': resolve('static')
    })
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization = {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ['console.log']// 移除console
              }
            }
          })
        ]
      }
    } else {
      // 为开发环境修改配置...
    }
  },
  css: {
    loaderOptions: {
      css: {
        importLoaders: 1 // @import 引入的文件可被一个loader处理 (2 可被两个loader处理)
      }
    }
  },
  devServer: {
    port: 80,
    disableHostCheck: true, // 可使用本地host配置的域名访问
    proxy: {
      '/api': {
        agent: new ProxyAgent('http://132.128.11.12'),
        target: 'http://132.128.11.12',
        ws: false,
        changeOrigin: true
      }
    }
  }
}

链式操作

@vue/cli内部的webpack 配置是通过webpack-chain维护的。

配置选项:

module.exports = {
    baseUrl: '/',
    outputDir: 'dist', //打包输出目录默认dist
   // assetsDir: 'bbbbb', //放置生成的静态资源 默认 ''
    chainWebpack: config => { //会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 
       config.resolve.alias.set('~',path.join(__dirname, '..','src/assets')) 
      },

   
}

更多细节可查阅

Owen 的个人博客

分类:

技术点:

相关文章:

© 版权声明
THE END
喜欢就支持一下吧
点赞44赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容