欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入浅析vue-cli@3.0 使用及配置说明

程序员文章站 2023-12-12 22:34:34
使用vue-cli3已经有相当一段时间了,一直没怎么去注意其中的配置,所以趁着这段时间总结下应用过程中的一些经验,本文是从安装到开发使用的一个过程讲解,也可以说是新手向的文...

使用vue-cli3已经有相当一段时间了,一直没怎么去注意其中的配置,所以趁着这段时间总结下应用过程中的一些经验,本文是从安装到开发使用的一个过程讲解,也可以说是新手向的文章,文字有点多,请耐心观看。

(一)安装:

1、下载安装node: 登陆并选择自己合适的node版本进行安装;

2、安装vue-cli脚手架工具

npm install -g @vue/cli
# or
# 推荐使用
npm install -g yarn # 如果已有安装,此步骤不需要
yarn global add @vue/cli

(二)创建一个项目:

vue create my-project
# or
vue ui

选择合适的配置
# 版本信息
vue cli v3.7.0 
? please pick a preset:
# 基础配置
 vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha)
 default (babel, eslint)
# 自定义配置,这里我们选择自定义选项,点击回车
> manually select features

选择需要的插件及编译工具

? check the features needed for your project:
# 代码转换,可以让你更好的书写前沿技术
 (*) babel
# javascript 的一个超集,好东西用起来
 (*) typescript
# pwa支持,不要求使用可以不选
 ( ) progressive web app (pwa) support
 (*) router
 (*) vuex
# css预编译器
 (*) css pre-processors
# 代码格式化
 (*) linter / formatter
# 书写单元测试用的,不要求使用可以不选
>(*) unit testing
 ( ) e2e testing

接下来的配置选项

# 是否使用class风格进行组件开发
? use class-style component syntax? yes
# 使用 babel 对 typescript 代码进行编译转换
? use babel alongside typescript for auto-detected polyfills? yes

? use history mode for router? (requires proper server setup for index fallback in production) yes
# 选择css预编译,这里我们选择sass/scss
? pick a css pre-processor (postcss, autoprefixer and css modules are supported by default): sass/scss (with node-sass)
# 选择代码格式化配置
? pick a linter / formatter config: standard
# 代码检查方式
? pick additional lint features: (press <space> to select, <a> to toggle all, <i> to invert selection)lint on save
# 选择单元测试工具
? pick a unit testing solution: mocha
# 是否将配置放在单独的文件中
? where do you prefer placing config for babel, postcss, eslint, etc.? in dedicated config files
# 是否将此次配置保存
? save this as a preset for future projects? no

最后

cd my-project
npm run install
npm run serve
# or 推荐使用
yarn install
yarn serve

(三)目录结构

深入浅析vue-cli@3.0 使用及配置说明

(四)环境变量配置

环境变量说明

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

新建环境变量 .env.development.text 用于测试环境 并添加如下代码

node_env='development'
vue_app_url='你的测试环境域名'

只有以 vue_app_ 开头的变量会被 webpack.defineplugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们:

console.log(process.env.vue_app_url)

修改 package.json ,并在 scripts 里面添加如下代码

"serve:test": "vue-cli-service serve --mode development.test",

(五)添加配置文件 vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 json 的格式来写。

// vue.config.js
module.exports = {
 // baseurl从 vue cli 3.3 起已弃用,请使用publicpath。
 // baseurl:'./', 
 // 配置sub-path后访问路径为https://xxx-path/sub-path/#/
 publicpath: process.env.node_env === 'production' ? '/sub-path/' : '/',
 // 输出文件路径,默认为dist
 outputdir: 'dist', 
 // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputdir 的) 目录。
 assetsdir: '', 
 // 指定生成的 index.html 的输出路径 (相对于 outputdir)。也可以是一个绝对路径
 indexpath: '',
 // 配置多页应用
 pages: {
 index: {
  // page 的入口
  entry: 'src/index/main.js',
  // 模板来源
  template: 'public/index.html',
  // 在 dist/index.html 的输出
  filename: 'index.html',
  // 当使用 title 选项时,
  // template 中的 title 标签需要是 <title><%= htmlwebpackplugin.options.title %></title>
  title: 'index page',
  // 在这个页面中包含的块,默认情况下会包含
  // 提取出来的通用 chunk 和 vendor chunk。
  chunks: ['chunk-vendors', 'chunk-common', 'index']
 },
 // 当使用只有入口的字符串格式时,
 // 模板会被推导为 `public/subpage.html`
 // 并且如果找不到的话,就回退到 `public/index.html`。
 // 输出文件名会被推导为 `subpage.html`。
 subpage: 'src/subpage/main.js',
 },
 lintonsave: true, // 保存时 lint 代码
 // css相关配置
 css: {
 // 是否使用css分离插件 extracttextplugin
 extract: true,
 // 开启 css source maps?
 sourcemap: false,
 // css预设器配置项
 loaderoptions: {
  // pass options to sass-loader
  sass: {
  // 自动注入全局变量样式
  data: `
   @import "src/你的全局scss文件路径";
  `
  }
 },
 // 启用 css modules for all css / pre-processor files.
 modules: false,
 },
 // 生产环境是否生成 sourcemap 文件
 productionsourcemap: false,
 //是否为 babel 或 typescript 使用 thread-loader。该选项在系统的 cpu 有多于一个内核时自动启用,仅作用于生产构建。
 parallel: require('os').cpus().length > 1,
 // 所有 webpack-dev-server 的选项都支持
 devserver: {
 port: 8080, // 配置端口
 open: true, // 自动开启浏览器
 compress: true, // 开启压缩
 // 设置让浏览器 overlay 同时显示警告和错误
 overlay: {
  warnings: true,
  errors: true
 },
 // 设置请求代理
 proxy: {
  '/api': {
  target: '<url>',
  ws: true,
  changeorigin: true
  },
  '/foo': {
  target: '<other_url>'
  }
 }
 },
}

(六)修改 webpack 配置信息

vue-cli3.0 的版本已经将 webpack 的配置整合进 vue.config.js 里面了

// 安装 babel-polyfill
// npm install babel-polyfill 或者 yarn add babel-polyfill
// 安装 uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin -d 或者 yarn add uglifyjs-webpack-plugin -d
// vue.config.js
const uglifyjsplugin = require('uglifyjs-webpack-plugin');
const isproduction = process.env.node_env === 'production';

module.exports = {
 chainwebpack: config => {
 // 引入babel-polyfill
 config
  .entry('index')
  .add('babel-polyfill')
  .end();
 // 添加文件路径别名
 config.resolve.alias.set("@", resolve("src"));
 if (isproduction) {
  // 生产环境注入cdn
  config.plugin('html')
  .tap(args => {
   args[0].cdn = cdn;
   return args;
  });
 }
 },
 configurewebpack: config => {
 if (isproduction) {
  // 为生产环境修改配置...
  config.plugins.push(
  //添加代码压缩工具,及设置生产环境自动删除console
  new uglifyjsplugin({
   uglifyoptions: {
   compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true,
   },
   },
   sourcemap: false,
   parallel: true,
  })
  );
 } else {
  // 为开发环境修改配置...
 }
 },
}

分离第三方插件,引入cdn配置

这里介绍一个开源的cdn库

// vue.config.js
const isproduction = process.env.node_env === 'production';
const cdn = {
 css: [],
 js: [
 'https://xxx-cdn-path/vue.runtime.min.js',
 'https://xxx-cdn-path/vue-router.min.js',
 'https://xxx-cdn-path/vuex.min.js',
 'https://xxx-cdn-path/axios.min.js',
 ]
}

module.exports = {
 configurewebpack: config => {
 if (isproduction) {
  // 用cdn方式引入,分离第三方插件
  config.externals = {
  'vue': 'vue',
  'vuex': 'vuex',
  'vue-router': 'vuerouter',
  'axios': 'axios'
  }
 } else {
  // 为开发环境修改配置...
 }
 },
}

修改html文件

<!doctype html>
<html lang="zh">
<head>
 <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= base_url %>static/favicon.ico" type="image/x-icon" />
 <link rel="shortcut icon" href="<%= base_url %>static/favicon.ico" type="image/x-icon" />
 <title>my-project</title>
 <!-- 使用cdn的css文件 -->
 <% for (var i in htmlwebpackplugin.options.cdn && htmlwebpackplugin.options.cdn.css) { %>
 <link href="<%= htmlwebpackplugin.options.cdn.css[i] %>" rel="preload" as="style">
 <link href="<%= htmlwebpackplugin.options.cdn.css[i] %>" rel="stylesheet">
 <% } %>
 <!-- 使用cdn的js文件 -->
 <% for (var i in htmlwebpackplugin.options.cdn && htmlwebpackplugin.options.cdn.js) { %>
 <link href="<%= htmlwebpackplugin.options.cdn.js[i] %>" rel="preload" as="script">
 <% } %>
</head>
<body>
 <noscript>
 <strong>we're sorry but eye-admin doesn't work properly without javascript enabled. please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <% for (var i in htmlwebpackplugin.options.cdn && htmlwebpackplugin.options.cdn.js) { %>
 <script src="<%= htmlwebpackplugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>
</html>

(七)关于打包后请求数的优化点preload and prefetch

首先我们看一张图

深入浅析vue-cli@3.0 使用及配置说明

从图中我们可以看出首次加载的资源非常多,有217个请求,为什么会这样呢?

查看官方文档,可以得知:

<link rel="preload"> 是一种 resource hint,用来指定页面加载后很快会被用到的资源,所以在页面加载的过程中,我们希望在浏览器开始主体渲染之前尽早 preload。

默认情况下,一个 vue cli 应用会为所有初始化渲染需要的文件自动生成 preload 提示。

这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过 chainwebpack 的 config.plugin('preload') 进行修改和删除。

<link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。

默认情况下,一个 vue cli 应用会为所有作为 async chunk 生成的 javascript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。

这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过 chainwebpack 的 config.plugin('prefetch') 进行修改和删除。

所以修改 vue.config.js 文件

// vue.config.js
module.exports = {
 chainwebpack: config => {
 // 移除 prefetch 插件
 config.plugins.delete('preload');
 config.plugins.delete('prefetch');
 }
}

(八)总结

vue-cli3在项目配置上精简了很多,而且它也提供了很多配置选项,满足定制化需要。各种配置也特别贴心,可以按照自己项目的需要进行自定义修改,大大减少了提升了开发的工作效率。

以上所述是小编给大家介绍的 使用及配置说明,希望对大家有所帮助

上一篇:

下一篇: