Vue-Cli

注意事项：1、vue-cli4版本测试环境无奈打包出带有hash值的文件名，解决办法： 即使设置filenameHashing:true,也是有效的，vue-cli4版本是认准NODE_ENV='production',如果想执行 npm run build:stage【指令对应环境变量文件是env.staging】，须要设置NODE_ENV='production'优化次要步骤：1、应用插件compressionPlugin进行gzip进行压缩，成果很显著 装置 npm install --save-dev compression-webpack-plugin如果装置失败，指定版本npm install --save-dev [email protected]const CompressionWebpackPlugin = require('compression-webpack-plugin');chainWebpack(config) { config.plugin('compressionPlugin').use( new CompressionWebpackPlugin({ test: /\.(js|css|json|ico|svg)$/,// 匹配文件格式 algorithm: 'gzip', threshold: 10240, // 对超过10k的数据压缩 minRatio: 0.8, // 压缩比 deleteOriginalAssets: false //是否删除源文件 }) );}nginx配置，间接粘贴在http {} 外面 gzip on; #其余属性不必，这个肯定要开，开启浏览器压缩申请 gzip_buffers 4 16k; # 压缩响应的缓冲区的数量和大小 gzip_comp_level 9; # 响应压缩的级别，1-9，数字越大压缩得越好，但越耗时间 gzip_http_version 1.1; # 默认1.1，所需的最小HTTP版本 gzip_min_length 1k; # 压缩最小大小，小于该值的文件不会被压缩 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; gzip_disable "MSIE [1-6]\."; gzip_vary on; 2、应用vue-cli4自带的splitChunks来分隔代码，会对公共模块进行抽取 ...

环境架构vue2 + vue-cli + element-ui 构建 问题背景在应用element-ui的Container布局容器编写基于vue-cli环境下的前端页面时发现在浏览器周围别离有白边生成如图 问题剖析受【简书】解决vue element-ui body页面默认边距- @web28的启发，应用f12关上控制台察看其初始style，发现body中具备8px的外边距款式 须要留神的是察看控制台中的8px款式是加在bady中的，故若打消白边只能将body中的margin置0px，而无奈通过设置<template>下的根元素style打消 问题解决依据控制台中的展现，只有在body中增加margin: 0px款式即可解决白边问题 代码： <template> <div id="app" > 1111111 </div></template><script>export default { name: 'App',}</script><style> body{ margin: 0px; }#app { background-color: red;}</style>效果图： 问题思考本来认为白边是element-ui生成的，然而应用npm uninstall elementui装配掉element后仍然存在该style，初步判断是vue生成的，然而生成起因不详，如果有大佬晓得其中一二，欢送评论 参考资料【简书】解决vue element-ui body页面默认边距- @web28 https://www.jianshu.com/p/877a4a24dd6c

最近因为工作须要，开始学习vue，于是在github上找了一个star数比拟高的我的项目 ant-design-vue-pro 筹备练手。我的项目克隆下来后，用 vscode 关上工程，并且应用了 vscode 自带的终端装置了依赖包，然而筹备执行 yarn serve 启动工程的时候却意外的抛出了一个谬误： $ vue-cli-service serve /bin/sh: vue-cli-service: command not founderror Command failed with exit code 127.刚开始看到这个报错示意情绪还是很平静的，毕竟大风大浪见得多了，首先想到的是不是依赖包没有装置胜利？ 于是把 node_modules 目录和 yarn.lock 文件删了从新装依赖包，重新启动发现仍然报错。思考了下开始狐疑是不是应用 yarn 装置依赖包的问题，于是换了 npm 和 pnpm 进行依赖包的装置，后果仍然是启动报错。 嘿嘿，到这里其实就开始感觉这个问题不简略了，狐疑这么重大的问题必定不是我一个人遇到过，通过一番Google检索，发现的确有人遇到过相似的问题，提出了如下几种解决办法： 删除 node_modules 和 lock 文件，重新安装依赖包应用npm装置依赖包，不要应用yarn既然报错 vue-cli-service 这个命令找不到，那就全局装置 npm install -g vue-cli-service办法一和办法二下面其实曾经尝试过了，是不行的，办法三尽管可能可行，然而显然全局装置 vue-cli-service 不是最优解。 于是开始尝试本人思考为什么启动报错？ 首先须要弄明确执行 yarn serve 到最终脚手架工程启动都执行了哪些操作？ 当咱们在工程目录下的终端执行 yarn serve 时，首先会去工程根目录下的 package.json 中的 scripts 字段查问是否有可执行的脚本，ant-design-vue-pro 是这么写的： { "scripts": { "serve": "vue-cli-service serve" }}当运行 yarn serve 就相当于执行的是 vue-cli-service serve，这个时候 nodejs 会尝试在 node_modules 下的 .bin 目录下查问 vue-cli-service 可执行性文件，如果找不到就会去全局装置的 node_modules 下查问可执行文件，如果还是找不到的话就会报错 command not found。 ...

记录一下我遇到过得vue.config.js配置项，以及过后用到它们的起因。publicPathmodule.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/vue/' : '/',}如果你的域名为 https://www.iicoom.top，如果生成环境 https://www.iicoom.top/ 这个门路曾经被其余我的项目占用，想要从https://www.iicoom.top/vue/ 这个门路拜访，那么进行下面的配置就能够实现。 configureWebpackremove log平时我的项目开发调试的时候免不了会有一些调试，打印一些log。当我的项目上线时去手动移除这些log可能是比拟麻烦的事件，有了上面这个配置，当咱们应用 npm run build// oryarn build之后，编译后的代码部署到线上环境，关上控制台就是清清爽爽的样子。 module.exports = { configureWebpack: config => { // 生产环境勾销 console.log if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.warnings = false config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'] } }}resolve过后我的项目中引入了一个富文本编辑器，叫 summernote。它依赖 bootstrap 和 jQuery，装置依赖后依然提醒 jquery 没有装置，于是进行了上面的配置，问题解决。 const path = require('path');module.exports = { // 选项... configureWebpack: { resolve: { alias: { 'jquery': path.resolve(__dirname, './node_modules/jquery/src/jquery'), 'jQuery': path.resolve(__dirname, './node_modules/jquery/src/jquery') } } }}

author: Nathanniedate: 2022年5月9日17:47:56 问题背景环境参数: "dependencies": { "ant-design-vue": "^2.0.0-rc.3", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0"},依照视频操作，集成 Ant Design Vue ，引入按钮款式组件，发现款式（色彩）不失效。 预期成果：实际效果： 能够看到色彩红色不失效 。 问题剖析通过一系列的查看，发现是官网代码书写有误官网给的代码（有误）： <a-button danger :size="size">Danger</a-button>正确状况的代码： <a-button type="danger" ghost>Danger</a-button>剖析：没有增加type=""属性。 问题呈现在danger款式都没有增加type=""图1图2 ⭐精确的起因是学习视频中展现的官网应用的Ant Design Vue教程版本是2.0.0.rc.2。 而danger款式作为类型是在2.2.0之后，所以就视频中的版本，应用danger必须应用属性的形式,即type="danger"。而以后学习工夫，官网版本变为2.2.8,而本地版本是"ant-design-vue": "^2.0.0-rc.3",,所以间接应用类型形式是不反对的。 问题解决如果装置ant-design-vue<2.2.0，则必须应用type="danger"。如果装置ant-design-vue>2.2.0，则能够应用danger。 # <2.2.0<a-button type="danger" >Default</a-button># > 2.2.0<a-button danger >Default</a-button>相干参考https://2x.antdv.com/componen...https://www.itxst.com/ant-des...

将 axios 绑定到 vue 原型上npm install axiosmain.js中导入并绑定import Vue from 'vue'import App from './App'import axios from 'axios'Vue.prototype.$axios = axiosnew Vue({ el: '#app', components: { App }, template: '<App/>'})调用<template> <div id="app"> <button @click="hello">点击</button> </div></template><script>export default { name: "App", methods: { hello() { // this.$axios({ // method: "get", // url: "http://localhost:1313/hello" // }).then(res => { // console.log(res.data); // }); this.$axios.get("http://localhost:1313/hello").then(response => { console.log(response.data); }); } }};</script><style></style>应用 vue-axiosnpm install --save axios vue-axiosmain.js 中装置import Vue from 'vue'import App from './App'import axios from 'axios'import VueAxios from 'vue-axios'// VueAxios 与 axios 的地位不能替换，否则呈现 TypeError: Cannot read property 'protocol' of undefinedVue.use( VueAxios , axios)new Vue({ el: '#app', components: { App }, template: '<App/>'})调用<template> <div id="app"> <button @click="handleClick">点击</button> </div></template><script>export default { name: "App", methods: { handleClick() { // this.axios({ // method: "get", // url: "http://localhost:8081/hello" // }).then(res => { // console.log(res.data); // }); this.axios.get("http://localhost:8081/hello").then(response => { console.log(response.data); }); } }};</script><style></style>post申请this.axios({ method: "post", url: "http://localhost:8081/hello", data: { username: "admin", password: "123" }}).then((res)=>{ console.log(res.data);})

<template> <div> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 体系配置 </el-breadcrumb-item> </el-breadcrumb> </div> <div class="container" v-if="hasObject('options')"> <div class="handle-box"> <el-form @submit.native.prevent> <el-input v-model="query.keyword" placeholder="id" class="handle-input mr10" @keyup.enter.native="search" > </el-input> <el-select v-model="query.tab" placeholder="类别" class="handle-select mr10" > <el-option key="" label="全副" value="">全副</el-option> <el-option v-for="(item, key) in options.checkSystemTab" :key="key" :label="item" :value="key" > {{ item }} </el-option> </el-select> <el-select v-model="query.tpl" placeholder="模板" class="handle-select-tpl mr10" > <el-option v-for="(item, key) in options.webConfigKV['tpl']" :key="key" :label="item" :value="key" > {{ item }} </el-option> </el-select> <el-button type="primary" icon="el-icon-search" @click="search" >搜寻</el-button > <el-button type="primary" @click="addCheck">增加</el-button> <el-button type="primary" @click="eximportVisible = true" >导入导出</el-button > <el-button type="primary" @click="referVisible = true">查看参考</el-button> </el-form> </div> <el-table :data="tableData" :cell-style="{ background: '#fff' }" border tooltip-effect="dark" style="width: 100%" > <el-table-column prop="id" label="ID" width="100" align="center" ></el-table-column> <el-table-column prop="control" label="管制项" min-width="200" ></el-table-column> <el-table-column prop="desc" label="形容" width="250"></el-table-column> <el-table-column prop="purpose" label="查看目标" width="250" ></el-table-column> <el-table-column label="类别" width="100"> <template slot-scope="scope"> {{ options.checkSystemTab[scope.row.tab] || "" }} </template> </el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button type="text" icon="el-icon-edit" @click="editCheck(scope.row.id, 'edit')" ></el-button> <el-button type="text" icon="el-icon-view" :title="'预览法律依据[' + scope.row.id + ']'" @click="editCheck(scope.row.id, 'previewLaw')" > </el-button> <el-button type="text" icon="el-icon-view" :title="'预览规范根据[' + scope.row.id + ']'" @click="editCheck(scope.row.id, 'previewStandard')" ></el-button> <el-button type="text" icon="el-icon-close" title="删除" @click="removeCheck(scope.row.id)" ></el-button> </template> </el-table-column> </el-table> <div class="pagination"> <el-pagination background layout="total, prev, pager, next" :current-page="parseInt(query.page) || 0" :page-size="parseInt(query.limit) || 0" :total="parseInt(query.total) || 0" @current-change="toPage" > </el-pagination> </div> </div> <el-dialog :title="dialogTitle" :visible.sync="popVisible" v-if="popVisible" width="80%"> <el-form :ref="pageName" :rules="rules" :model="check" label-width="100px" > <el-form-item label="ID" prop="id"> <el-input v-model="check.id"></el-input> </el-form-item> <el-form-item label="管制项" prop="control"> <el-input v-model="check.control"></el-input> </el-form-item> <el-form-item label="形容" prop="desc"> <el-input v-model="check.desc"></el-input> </el-form-item> <el-form-item label="查看目标" prop="purpose"> <el-input v-model="check.purpose"></el-input> </el-form-item> <el-form-item label="危险条件" prop="dangerConditions"> <TableDangerCondition :options="options" :instance="check"> </TableDangerCondition> </el-form-item> <el-form-item label="存在条件" prop="conditions"> <el-input :value="JSON.stringify(check.conditions)" @input="handleChange($event, 'conditions')" ></el-input> </el-form-item> <el-form-item label="相干问题" prop="source"> <el-input :value="JSON.stringify(check.source)" @input="handleChange($event, 'source')" ></el-input> </el-form-item> <el-form-item label="类别" prop="tab"> <el-select v-model="check.tab" width="100"> <el-option v-for="(item, key) in options.checkSystemTab" :key="key" :value="key" :label="item" >{{ item }}</el-option ></el-select > </el-form-item> <el-form-item label="规范根据" prop="standard"> <Editor :content="check.standard" ref="standardEditor"></Editor> </el-form-item> <el-form-item label="法律依据" prop="law"> <Editor :content="check.law" ref="lawEditor"></Editor> </el-form-item> <el-form-item label="模板" prop="tpl"> <el-select v-model="check.tpl" class="handle-select-tpl"> <el-option v-for="(item, key) in options.webConfigKV['tpl']" :key="key" :value="key" :label="item" >{{ item }}</el-option ></el-select > </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="popVisible = false">取 消</el-button> <el-button type="primary" @click="saveCheck">确 定</el-button> </span> </el-dialog> <el-dialog title="预览法律依据" :visible.sync="previewVisibleLaw" width="50%" > <div v-html="check.law" class="preview-html"></div> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="previewVisibleLaw = false" >确 定</el-button > </span> </el-dialog> <el-dialog title="预览规范根据" :visible.sync="previewVisibleStardard" width="50%" > <div v-html="check.standard" class="preview-html"></div> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="previewVisibleStardard = false" >确 定</el-button > </span> </el-dialog> <ExImport :options="options" :eximportVisible="eximportVisible" @closeExImport="closeExImport" :source="pageName" ></ExImport> <!-- 参考模态框 --> <Refer :referVisible="referVisible" @closeRefer="closeRefer"></Refer> </div></template><script>import { Common } from "@admin/mixin/common";import { Has } from "@admin/mixin/has";import { Rules } from "@admin/mixin/rules";import { Library } from "@admin/mixin/library";import Editor from "../common/editor";import TableDangerCondition from "./tableDangerCondition.vue";import ExImport from "./eximport.vue";import Refer from "./refer.vue";export default { mixins: [Common, Rules, Has, Library], name: "CheckSystem", components: { Editor, TableDangerCondition, ExImport, Refer, }, data() { return { pageName: "checkSystem", check: {}, rulesInfo: { id: "请输出id", control: "请输出管制项", desc: "请输出形容", purpose: "请输出查看目标", tpl: "请抉择模板", }, }; }, methods: { handleChange(e, field) { this.check[field] = JSON.parse(e); }, }, mounted() { this.getCheckDict(); },};</script>

根本介绍通过 vue cli 搭建的我的项目，有三种模式 development 模式用于 vue-cli-service servetest 模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2e你能够通过传递 --mode 选项参数为命令行覆写默认的模式。如： vue-cli-service build --mode development在 执行 npm run build 的时候能够抉择不同的模式，进行打包 环境变量在我的项目根目录下搁置下列文件来指定环境变量： .env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 疏忽.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 疏忽.env.development 文件内容： # just a flagENV = 'development'# base apiVUE_APP_STRAPI_URL = '/dev-api'VUE_APP_STRAPI_URL = http://192.168.9.9966:1122VUE_APP_MSG_BOT_UR = http://192.168.9.8855:1122.env.production 文件内容： # just a flagENV = 'production'# base apiVUE_APP_STRAPI_URL = '/prod-api'VUE_APP_STRAPI_URL = http://192.168.9.0077:2233VUE_APP_MSG_BOT_UR = http://192.168.9.1188:2233这样就能够针对不同的环境进行打包，也不必重复批改后端地址。 ...

执行卸载命令: 全局卸载：npm uninstall vue-cli -g删文件： .npmrc文件删除掉：npm config ls -l能够查看文件地位：userconfig = "C:UsersAdministrator.npmrc"删vue原始文件： 窗口运行命令：where vue,找到以后装置地位，找到文件，删掉保险起见能够再执行一次npm uninstall vue-cli -g，vue -V，曾经没有版本号了装置新版：npm install -g @vue/cli OR yarn global add @vue/cli

装置vue-cli 查看版本 创立我的项目 创立我的项目的配置通过高低箭头可设置选项，按回车键确定 运行我的项目 留神 local:集体创立的Vue我的项目Network:团队创立的Vue我的项目

关上snap.svg的github：https://github.com/adobe-webplatform/Snap.svg 依照snap.svg的阐明来 1、装置snap.svg npm install snapsvg 2 、vue是基于webpack的，webpack 2.x and 3.x 须要装置Imports Loader npm i -D imports-loader 3、vue.config.js增加配置 module: { rules: [ { test: require.resolve('snapsvg/dist/snap.svg.js'), use: 'imports-loader?this=>window,fix=>module.exports=0', }, ], }, resolve: { alias: { snapsvg: 'snapsvg/dist/snap.svg.js', }, },4、应用： import Snap from 'snapsvg'; 此时运行我的项目会报错。示意import-loader传了不可辨认的属性。 查阅import-loader，发现其反对的属性只有 可见官网给到的rules的use配置是谬误的。 通过查看snap.svg的issue，能够找到第三条记录 点击进入 https://github.com/adobe-webplatform/Snap.svg/issues/639 so：批改配置为： module: { rules: [ { test: require.resolve('snapsvg/dist/snap.svg.js'), use: 'imports-loader?wrapper=window&additionalCode=module.exports=0;', }, ], },即可。

1.开发工具 - VS Code抉择 VS Code 是因为这是一款很容易上手的工具，在 VS Code 中找到的每个性能都实现一项杰出的工作，构建了一些简略的功能集，包含语法高亮、智能补全、集成 git 和编辑器内置调试工具等，将使你开发更高效。下载地址官网： https://code.visualstudio.com/ 举荐插件Vetur —— 语法高亮、智能感知、Emmet 等Vue VSCode Snippets —— 疾速生成 Vue 模板EsLint—— 语法纠错Auto Close Tag —— 主动闭合 HTML/XML 标签Auto Rename Tag —— 主动实现另一侧标签的同步批改Path Intellisense —— 主动路劲补全Bracket Pair Colorizer —— 为代码中的括号添上一抹亮色您能够在这里找到无关扩大的文档: https://code.visualstudio.com/docs/extensions/overview 2.装置 Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 应用了一个事件驱动、非阻塞式 I/O 的模型。下载地址官网： https://nodejs.org/en/ （一路 next 即可） 装置完可在控制台查看 node、npm 对应版本node -vnpm -v永恒应用淘宝镜像命令：npm config set registry https://registry.npm.taobao.org3.装置 vue-devtoolsvue-devtools 是一款基于 chrome 浏览器的插件，用于调试 vue 利用，这能够极大地提高咱们的调试效率。接下来咱们就介绍一下 vue-devtools 的装置。装置形式形式一：chrome 商店间接装置vue-devtools 能够从 chrome 商店间接下载安装 ...

先抛出我的疑难：为什么 vue-cli sourcemap私有化部署 这个解决方案很少有人提，网上搜到的根本都是说sourcemap配置（开关和模式等根底配置）的货色，尽管说sourcemap私有化部署配置比拟好实现，但我在vue-cli4生成的我的项目中发现这里还是有个小坑的，故，以此记录 咱们先关上vue-cli 的文档看下相干配置 // vue.config.jsmodule.exports = { // options... productionSourceMap: true, // 默认是true，接管的是布尔值}哦？没了？没了，sourcemap publicPath？不存在！也就是咱们压根不能通过简略的批改配置做到私有化部署sourcemap的需要，那怎么办？必定是批改webpack配置了！用 SourceMapDevToolPlugin 啊！这里的具体用法我不再赘述，毕竟文档都贴出来了 OK，咱们开始吧......很快，咱们就写好了，如下 const webpack = require('webpack')module.exports = { productionSourceMap: true, // 默认是true，接管的是布尔值 chainWebpack: config => { config.plugin('SourceMapDevToolPlugin') .use(webpack.SourceMapDevToolPlugin).tap(args => { return [{ filename: '[file].map', publicPath: 'https://exmaple.com/', moduleFilenameTemplate: 'source-map' }] }) }}而后你兴奋的去运行 npm run build ......可是你发现在打包后的js开端呈现两个sourcemap指向，这是不对的，而后你开始各种猜测，各种尝试，发现就是不行，要么这不行，要么那不行的（手动坏笑） 怎么办？ 排查问题大法之审查webpack配置vue-cli是开发工具，打包是基于webpack的，那咱们就去看webpack咯，看看vue-cli最终生成的webpack配置到底是什么，到底是哪里出错了不就能找到问题的起因了吗？那怎么办呢？好在cli提供了这样的命令，毕竟webpack的确配置太简单了 点击查看审查我的项目的 webpack 配置文档 运行 vue inspect --mode production > output.js 后咱们发现......咱们发现很多方才尝试的那么多为什么不胜利的起因，每个人尝试的都不同，我只说最后咱们遇到的问题吧——为什么会有两个sourcemap指向，对了，这里提一下在审查webpack配置时加上的 --mode production 如果咱们不加上这句那默认审查的配置就是 development 模式下的了，那你可能还是找不到起因，好了，咱们看下输入的配置 ...