Vue CLI

本文转载于: 猿2048 网站 vue-cli启动本地服务，局域网下通过ip访问不到的原因 1.问题描述： 新开发了一个vue-cli项目，想通过手机查看效果，发现访问不到，ip地址和端口号都没错但是手机访问不到，在本机电脑浏览器输入ip端口号一样访问不到，只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问地址是localhost:8080 3.改正的方式 找到config文件夹下的index.js文件,修改host:“localhost”为 host:"0.0.0.0",此时同一局域网下的手机和其他电脑能通过ip+端口号查看到页面 来源： oschina 链接： https://my.oschina.net/u/4191619/blog/3099024

问题：最近有些朋友问我写官网，用Vue框架实现好不好？ 相信很多使用Vue的小伙伴们一样疑惑这个问题，其实从这个问题就可以知道你对Vue这个框架是否真的熟悉了。 其实单单使用Vue这个框架来做官网的，其实是不友好的，非常不利于SEO，抓取。因为Vue是通过把你的代码编译的，生成是SPA，里面的html其实是空的，Nuxt.js属于SSR,也就是服务器渲染。Nuxt.js打包生成的每个路由都会对应相对的html文件。有利于网站抓取，SEO。 Vue适合做对seo无关紧要的项目，别的项目不适合，但是Nuxt.js 正好就修补了Vue的这个缺陷。 官方解析： Nuxt.js环境搭建和创建启动项目 做vue的小伙伴都知道vue-cli脚手架，其实vue-cli已经集成了nuxt.js，所以直接使用vue-cli就可以直接构建Nuxt.js项目了。 直接在需要创建项目的路径新建文件夹，文件夹名为项目名称，其实就是和创建vue项目一样。然后在该文件下打开cmd，然后运行下面cmd命令 vue init nuxt/starter 成功创建如下图所示： 然后使用 npm install 下载依赖项，运行项目 npm run dev 此时项目已经运行成功，并且默认在3000端口打开。 浏览器预览： 很高兴告诉你，此时Nuxt.js项目已经创建并且启动成功。 Nuxt.js目录结构 assets //

本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了 echart 、 element-ui 、 lodash 首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中 借助webpack-bundle-analyzer帮助分析 首先安装webpack-bundle-analyzer yarn add webpack-bundle-analyzer -D 然后在项目根目录创建vue.config.js，然后在文件中写入以下代码 const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: { plugins: [new WebpackBundleAnalyzerPlugin()] } } 然后执行 yarn build 在浏览器会自动打开我们的使用包分析文件，大致如下图的样子 我们可以看到生成的最大文件为 chunk

【推荐阅读】微服务还能火多久？>>> 在package.json同级目录新建vue.config.js文件，内容如下： const webpack = require("webpack"); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。 //webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } } 来源： oschina 链接： https://my.oschina.net/u/575679/blog/3051326

【推荐阅读】微服务还能火多久？>>> 期望： 希望通过npm命令实现远程服务端部署 部署分测试环境、生产环境 打包部署前必须保证本地代码为最新代码，与git服务器同步 需要保留vue cli的版本管理，上传代码前备份index.html，方便版本退回 思路 定义测试环境与生产环境的配置对象，包括host、port、username、password、path（部署路径）、outputDir（打包文件夹） 拉取所在分支最新代码，保证本地代码与git服务器一致（git fetch --all && git reset --hard origin/branchName && git pull，操作给出提示，确保本地有用代码已经提交） 通过env环境打对应的包 通过ssh2，远程执行linux stat命令，获取index.html文件的最后修改时间，工具这个时间生成版本号 通过ssh2，执行linux的cp命令，拷贝服务器上index.html，重命名为index.201911081804.html（201911081804为index.html的最后修改时间） 用scp2插件上传打包好的文件到服务器目标目录 实现 （代码比较潦草，需要整理） deploy.js // /deploy.js const scpClient = require("scp2"); const exec =

【推荐阅读】微服务还能火多久？>>> 在vue-cli3的项目中， npm run serve时会把process.env.NODE_ENV设置为‘development’； npm run build 时会把process.env.NODE_ENV设置为‘production’； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 添加测试环境 1、package.json中添加 "test":"vue-cli-service build --mode test" 2、项目根目录中添加文件.env.test，内容问NODE_ENV = "test" 来源： oschina 链接： https://my.oschina.net/u/3705266/blog/2990615

【推荐阅读】微服务还能火多久？>>> 参考地址 前言 ：项目一般有开发环境，测试环境，生产环境；vue cli内置有开发和生产环境，可以用process.env.NODE_ENV区分，有时候我们和后台同事需要本地连接调试代码，又需要连接测试环境调试，发布的还有生产环境。关靠NODE_ENV无法区分3种baseUrl。下面加一种alpha环境变量，和production打包就productionSourceMap配置有区别，用于测试环境方便查看源码调试。 1、创建vue cli环境变量 在项目根目录创建文件 .env.build 编辑内容为 NODE_ENV = 'production' VUE_APP_BUILD = 'production' 在项目根目录创建文件 .env.alpha 编辑内容为 NODE_ENV = 'production' VUE_APP_BUILD = 'alpha' 两个文件NODE_ENV值都为production，以消除vue cli内部使用NODE_ENV变量导致打包出现差异 2、修改package.json启动模式 { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --mode build", "alpha": "vue-cli

【推荐阅读】微服务还能火多久？>>> VUE课程---1、VUE课程介绍 一、总结 一句话总结： vue.js是目前前端最火的框架，不仅可以开发网站，还可以开发移动app，插件和对应的UI库也都非常多 1、vue特点？ 双向数据绑定：用户不在需要操作dom 虚拟dom：提高渲染性能 组件化开发：便于组件管理和复用，提高开发效率 2、vue与其它前端JS框架的关联？ vue借鉴angular 的模板和数据绑定技术 vue借鉴react 的组件化和虚拟 DOM 技术 3、Vue扩展插件？ Vue扩展插件很多，有vue-cli、axios、vue-router、vuex等vue全家桶，也有vue-lazyload、vue-scroller等组件库，也有Quasar等UI组件库 vue- cli: vue 脚手架 vue - resource(axios): ajax 请求 vue - router: 路 由 vuex: 状态管理 vue - lazyload: 图片懒加载 vue - scroller: 页面滑动相关 Quasar：vue ui组件库 二、VUE课程介绍 博客对应课程的视频位置： 1 <! DOCTYPE html > 2 < html lang ="en" > 3 < head > 4 < meta charset ="UTF-8" > 5 < title > 1

【推荐阅读】微服务还能火多久？>>> 最近在做一个微信公众号项目，用微信开发工具调试本地项目，需要做一下内网穿透，代理都配置好了，页面出现这个 Invalid Host header错误，内网穿透工具我是用的frps做的，最后通过google找到方法，在vue-cli版本为2.x的情况下修改 webpack.dev.conf.js 中的 devServer对象加入 disableHostCheck: true即可转发成功 1 devServer: { 2 disableHostCheck: true , 3 } vue-cli版本3.0的情况下修改 vue.config.js 的配置 1 module.exports = { 2 devServer: { 3 disableHostCheck: true 4 } 5 } 来源： oschina 链接： https://my.oschina.net/u/4370305/blog/3235576

【今日推荐】：为什么一到面试就懵逼！>>> 前几天ts+vue3.0+view-design撸了一个项目，然后总感觉哪里不对劲，今天终于醒悟了原来是热更新没开 在vue.config.js中配置以下选项 const IS_PRO = [ 'production' , 'test' ] . includes ( process . env . NODE_ENV ) ; css : { // 是否使用css分离插件 ExtractTextPlugin extract : IS_PRO , // 开启 CSS source maps 打包时不生成.map文件? sourceMap : false , // css预设器配置项 loaderOptions : { } , // 为所有的 CSS 及其预处理文件开启 CSS Modules。 // 这个选项不会影响 `*.vue` 文件。 requireModuleExtension : true } , 上文中用到了process.env环境变量，那么这里在安利一个知识点吧 package.json "scripts" : { "serve" : "vue-cli-service serve" , "build" : "vue-cli-service build" , "build:dev" : "vue-cli-service build