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

站长资源 2024/11/26 佚名

2 0 1

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

（一）安装：

1、下载安装node: 登陆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 
"htmlcode">

"htmlcode">

# 是否使用class风格进行组件开发
"htmlcode">

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


（三）目录结构



（四）环境变量配置
环境变量说明
.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' "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库www.bootcdn.cn/


// 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="/UploadFiles/2021-04-02/<%= htmlWebpackPlugin.options.cdn.js[i] %>">

（七）关于打包后请求数的优化点Preload and Prefetch
首先我们看一张图



从图中我们可以看出首次加载的资源非常多，有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在项目配置上精简了很多，而且它也提供了很多配置选项，满足定制化需要。各种配置也特别贴心，可以按照自己项目的需要进行自定义修改，大大减少了提升了开发的工作效率。
以上所述是小编给大家介绍的vue-cli@3.0 使用及配置说明,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

                                
                                
                                    vue-cli@3.0,使用,vue,-cli,配置

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

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

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

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

更新日志

2024年11月26日

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

Vue.js轮播图走马灯代码实例（全）

js实现继承的方法及优缺点总结

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

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

更新日志

友情链接