VUE CLI 3 配置

时间  2019-11-15
标签 vue cli 配置 繁體版
原文   原文链接

前置知识

  • node安装
  • npm(yarn,cnpm)
  • webpack(webpack-cli)

VUE CLI3使用中遇到问题

IE兼容处理、移除consolejavascript

npm install @babel/polyfill -s
npm install transform-remove-console -s

// 在babel.config.js中配置以下
const plugins = []
if (process.env.NODE_ENV === 'production') {
  // 移除console.log
  plugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.array.iterator',
        'es6.promise',
        'es7.promise.finally',
        'es6.symbol',
        'es6.array.find-index',
        'es7.array.includes',
        'es6.string.includes',
        'es6.array.find',
        'es6.object.assign'
      ]
    }]
  ],
  plugins
}


复制代码

基于vue-cli3.0快速构建vue项目

本章详细介绍使用vue-cli3.0来搭建项目。 本章使用vue-cli3.0构建的项目是基于webpack的模板文件，构建后的项目属于单页面（SPA）应用。所以，该文档后续操做与说明不适用于构建一个多页面应用。css

相比于以前有以下优势：html

  • 功能丰富：对babel、Typescript、ESLint...提供开箱即用的支持
  • 易于扩展：它的插件系统可让社区根据需求构建和共享可复用的解决方案
  • 无需Eject：vue cli 彻底可配置的，无需再使用webpack配置
  • CLI图形化界面：vue ui图形化界面建立、开发和管理项目
  • 即刻建立原型：用单个vue文件实现新的灵感
  • 面向将来：为现代浏览器轻松产出原生的ES2015代码，或将你的vue组件构建为原生的Web Components组件

一、vue-cli3.0初始化

安装@vue/cli

# npm install -g @vue/cli
OR
# yarn global add @vue/cli
复制代码

你可使用vue --version 或者 vue -V检查其版本前端

注意事项:

  • VUE CLI3的包名称由vue-cli改为@vue/cli。若是你已经安装了旧版本的vue-cli(1.x或2.x)，你先经过npm uninstall vue-cli -g或 yarn global remove vue-cli卸载它。
  • VUE CLI3须要node8.9或更高版本（推荐8.11.0+）
  • VUE CLI3和旧版本使用了相同的vue命令，因此Vue CLI2(vue-cli)被覆盖了。若是你仍然须要使用旧版本的vue init 功能，你须要全局安装一个桥接工具：
npm install -g @vue/cli-init
Vue init webpack myVue
复制代码

二、建立项目

可使用vue ui图形化界面建立和管理项目，这里不作阐述，请自行查看cli.vuejs.org/，下面以命令行形式进行建立：vue

vue create vuedemo
复制代码

你会被提示选取一个preset。你能够选默认的包含了基本的Babel+ESLint设置的preset，也能够选手动选择特性来选取须要的特性。java

这个默认的设置很是适合快速建立一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加须要的，下面以”手动设置“为例。以上下键移动，以空格键进行是否选定node

  • Babel : 将ES6编译成ES5
  • TypeScript: javascript类型的超集
  • Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
  • Router:vue-router
  • Vuex: 状态管理
  • CSS Pre-processors: CSS预处理
  • Linter / Formatter: 开发规范
  • Unit Testing: 单元测试
  • E2E Testing: 端到端测试

若是后续你想在一个已经被建立好的项目中安装插件，可使用 vue add 命令：webpack

D:\i\vuedemo> vue add vuex
复制代码

出现如上字样，说明安装成功。请输入命令cd vuedemo与yarn serve运行环境。git

三、配置文件说明

vue-cli3.0致力于Vue生态中的工具基础标准化。它确保了各类构建工具可以基于智能的默认配置便可平稳衔接，这样你就能够专一在撰写应用上，减小配置的时间。查看以下文件，会发现相比于vue-cli2.0少了build与config文件夹，因此vue-cli3提供了一个可选的配置文件 ——vue.config.js。请具体参考4和5(打包配置)，这里只详细解读文件做用。es6

|-- dist                       # 打包后文件夹 
|-- public                     # 静态文件夹 
|   |-- favicon.ico				
|   |-- index.html					#入口页面
|-- src                        # 源码目录 
|   |--assets						# 模块资源
|   |--components					# vue公共组件
|   |--views 						
|   |--App.vue                                          # 页面入口文件
|   |--main.js	                                        # 入口文件，加载公共组件
|   |--router.js                                        # 路由配置
|   |--store.js	                                        # 状态管理
|-- .env.pre-release          # 预发布环境 
|-- .env.production	      # 生产环境 
|-- .env.test		      # 测试环境 
|-- vue.config.js             # 配置文件 
|-- .eslintrc.js    		  	# ES-lint校验 
|-- .gitignore          		# git忽略上传的文件格式 
|-- babel.config.js   			# babel语法编译 
|-- package.json       	     # 项目基本信息 
|-- postcss.config.js   	 	# CSS预处理器(此处默认启用autoprefixer) 
复制代码

四、vue.config.js配置

Vue.config.js是一个可选的配置文件，若是项目的根目录存在这个文件，那么它就会被 @vue/cli-service 自动加载。你也可使用package.json中的vue字段，但要注意严格遵照JSON的格式来写。这里使用配置vue.config.js的方式进行处理。

const webpack = require('webpack')
module.exports = {
    //部署应用包时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就能够在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾 
    productionSourceMap: true,
    
    //容许咱们更细粒度的控制 webpack 的内部配置,例如：如下操做咱们能够成功修改 webpack 中 module 项里配置 rules 规则为图片下的 url-loader 值，将其 limit 限制改成 5M
    chainWebpack: config => {
        config.module.rule("images")
        .use("url-loader")
        .tap(options =>
        merge(options, {
        limit: 5120
    }));
    },
    //能够在正式环境下关闭错误报告 console.log...
    configureWebpack: config => { 
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server 相关配置
    devServer: { // 设置代理
        hot: true, //热加载
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            '/api': { //本地 
            target: 'http://192.168.102.13:8080/',
            // 若是要代理 websockets
            ws: true,
            changeOrigin: true
      },
      '/test': { //测试
        target: 'http://172.22.0.58:8082/'
      },
      '/pre-release': {  //预发布
        target: 'http://XXX.com/'
      },
      '/production': { //正式
        target: 'http://XXX.com/'
      }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}
复制代码

扩展:

Source map的做用：针对打包后的代码进行的处理，就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

五、打包配置

在实际项目的开发中，咱们通常会经历项目的开发阶段、测试阶段、预发布阶段和最终上线阶段，每个阶段对于项目代码的要求可能都不尽相同，那么咱们如何可以游刃有余的在不一样阶段下使咱们的项目呈现不一样的效果，使用不一样的功能呢？这里就须要引入环境的概念。

通常一个项目都会有如下 4 种环境：

  • 开发环境（开发阶段，本地开发版本，通常会使用一些调试工具或额外的辅助功能）
  • 测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差异）
  • 预发布环境（即将上线阶段，上线前版本，预测线上出现问题的可能性，和上线版本无差异）
  • 生产环境（上线阶段，正式对外发布的版本，通常会进行优化，关掉错误报告）

做为一名开发人员，咱们可能须要针对每一种环境编写一些不一样的代码而且保证这些代码运行在正确的环境中，这就须要咱们进行正确的环境配置和管理。

建立.env.test文件，文件内容以下

NODE_ENV='test'                    # 测试环境
VUE_APP_TT='TT'
复制代码

建立.env.pre-release文件，文件内容以下：

NODE_ENV='pre-release'              # 预发布环境
复制代码

建立.env.production文件，文件内容以下：

NODE_ENV='production'              # 正式环境
VUE_APP_T='la'
Q='1'
复制代码
package.json配置
"scripts": {
    "serve": "vue-cli-service serve ",
    "build:pre": "vue-cli-service build --mode pre-release",  #预发布环境
    "build:test": "vue-cli-service build --mode test", #测试环境
    "build:prod": "vue-cli-service build --mode production", #正式环境
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
}
复制代码

注意：

  • 在vue.config.js使用process.env.[name]进行访问就能够了
// vue.config.js

console.log(process.env.NODE_ENV); // development（在终端输出）
复制代码
  • 当你运行 yarn serve 命令后会发现输出的是 development，由于 vue-cli-service serve 命令默认设置的环境是 development，你须要修改 package.json 中的 serve 脚本的命令为：
"scripts": {
"serve": "vue-cli-service serve --mode test",
}
#--mode test其实就是修改了 webpack 4 中的 mode 配置项为 test，同时其会读取对应 .env.[model]文件下的配置，若是没找到对应配置文件，其会使用默认环境 development，一样 vue-cli-service build 会使用默认环境 production。
复制代码
有关环境变量的注意事项
  • 环境名应该与环境文件统一
  • 环境文件放置根目录下
  • 除了 baseUrl 和 NODE_ENV 其余环境变量使用 VUE_APP开头

六、部署项目的跨域处理

项目打包后，进行上线，此时，vue项目在开发调试模式下配置的跨域处理无效，此时跨域处理依赖要访问后端服务的配置。

第一种解决方法后端增长CORS跨域资源共享，Java、.Net代码有区别，可是大致认是设置Http协议中的“origin”相关的属性。

第二种方法设置后端的HTTP服务器，对全部HTTP请求进行过滤，增长跨域CORS资源共享。

这两种方式前端开发都没法介入，须要和后端服务提供的开发人员、部署服务的运维进行沟通说明。

githup地址：github.com/Mr-jili/vue…

请各位给给意见，查漏补缺，有哪些不足之处请给予意见。呸呸，文档须要上交领导---

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程