深入浅析vue-cli@3.0 使用及配置说明
使用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">上一篇:Vue.js轮播图走马灯代码实例(全)# 是否使用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 使用及配置说明,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:js实现继承的方法及优缺点总结