vue-cli2升级成vue-cli3

admin 2019-11-07 18:34:10 Vue 浏览(2247) 点赞(1)

简介

Vue CLI的包名称由vue-cli改成了@vue/cli

安装

  • 首先卸载vue-cli2.x
npm uninstall vue-cli -g
  • 安装@vue/cli
npm install @vue/cli -g
  • 安装桥接工具(新版本和旧版使用了相同的vue命令。如果仍然需要使用旧版本的vue init功能，需要全局安装一个桥接工具)
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建项目

  • 方法一：vue create创建
vue create project-name
  • 方法二：图形化创建
vue ui

安装插件

在现有项目中安装插件

vue add eslint

警告：

  • 推荐在运行vue add之前将项目的最新状态提交，因为该命令将会调用插件的文件生成器并很有可能更改你现有的文件。

静态资源

  • 静态资源路径以@开头代表<projectRoot>/src

  • 静态资源路径以~开头，可以引入node modules内的资源

  • 在public/index.html中引用静态资源

<%= webpackConfig.output.publicPath %>
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow" >
  • vue templates中，需要在data中定义baseUrl
<template>
 <img :src="`${baseUrl}my-image.png`">
</template>
<script>
export default {
  data() {
    return {
      baseUrl: process.env.BASE_URL
    }
  }
}
</script>

配置修改

查看默认配置

除了到vue-cli的开发文档中找默认配置之外，我们还可以将项目现有的配置导出来看

  • 执行命令vue inspect > output.js
  • 根目录下会生成output.js文件，该文件记录了项目目前的配置

以下是vue.config.js完整的默认配置

// vue.config.js
module.exports = {
  // 基本路径
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

使用相对路径

  • 在根目录下新建vue.config.js
module.exports = {
  publicPath: './'
}

使用static静态文件

  • 静态文件放置在/public/目录下。比如在该目录下新建img/目录存放图片文件

使用绝对路径的项目

  • 模板中访问<img src="/img/aa.png" />

使用相对路径的项目

  • 修改.env.dev、.env.sit、.env.prod文件，添加变量（比如：VUE_APP_PUBLIC_PATH）

  • 模板中访问

<img :src="`${publicPath}img/aa.png`" />

// ...
export default {
  data() {
    return {
      publicPath: process.env.VUE_APP_PUBLIC_PATH,
      // ...
    }
  },
  // ...
}

添加xml-loader

  • 安装xml-loader：npm i xml-loader --save-dev

  • 修改vue.config.js文件

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('xml')
      .test(/\.xml$/)
      .use('xml-loader')
        .loader('xml-loader')
        .end();
  }
}
  • 在js文件中使用
import config from './shoes.xml'
console.log(config)

使用路径别名

  • 修改vue.config.js文件，通过 chainWebpack 来间接修改
const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  // ...
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
  // ...
}

备注：
在样式及 html 模板中引用路径的简写时，前面需要加上 ～ 符，否则路径解析会失败

.img {
  background: ("~assets/img/home.png");
}

设置代理

// string 形式
module.exports = {
  devServer: {
    proxy: '<url>'
  }
}
// Object 形式
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        pathRewrite: { '^/api' : '' }
      }
    }
  }
}

配置多环境

比如配置三个环境dev、sit、prod。给这三个环境配置不同的接口地址

  • 修改package.json文件的scripts部分，配置这三个环境
{
  // ...
  "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build:sit": "vue-cli-service build --mode sit",
    "build:prod": "vue-cli-service build --mode prod",
    // ...
  },
  // ...
}
  • 在根目录下添加dev环境的配置文件env.dev
NODE_ENV=development
VUE_APP_URLAPI="http://xxx"
  • 在根目录下添加sit环境的配置文件env.sit
NODE_ENV=production
VUE_APP_URLAPI="http://xxx"
  • 在根目录下添加prod环境的配置文件env.prod
NODE_ENV=production
VUE_APP_URLAPI="http://xxx"
  • 在组件或者js文件中使用
console.log(process.env.VUE_APP_URLAPI)

备注：

  • NODE_ENV是development、production或test中的一个。具体的值取决于应用运行的模式
  • BASE_URL会和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径
  • env.local、env.sit.local等是本地环境默认配置，git忽略
  • 在项目中，也就是src/中使用环境变量的话，必须以VUE_APP_开头
  • 在webpack配置中使用，没什么限制，可以直接通过process.env.XXX来使用
  • 在public/index.html中使用的，分三类：
  1. <%= VAR %>：用于非转换插值 例如：<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
  2. <%- VAR %>：用于HTML转义插值
  3. <% expression %>：用于JavaScript控制流

分环境引入文件

给sit环境引入eruda，方便移动端测试

  • 修改dev环境的配置文件env.dev
NODE_ENV=development
VUE_APP_URLAPI="http://xxx"

VUE_APP_MODE="dev"
  • 修改sit环境的配置文件env.sit
NODE_ENV=production
VUE_APP_URLAPI="http://xxx"

VUE_APP_MODE="sit"
  • 修改prod环境的配置文件env.prod
NODE_ENV=production
VUE_APP_URLAPI="http://xxx"

VUE_APP_MODE="prod"
  • 修改public/index.html文件
<!DOCTYPE html>
<html lang="en">
  <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,user-scalable=no">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- ... -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% if (VUE_APP_MODE === "sit") { %>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    <% } %>
  </body>
</html>

正式环境使用CDN地址

  • 修改.env.dev、.env.sit文件，添加VUE_APP_PUBLIC_PATH
// ...
VUE_APP_PUBLIC_PATH="./"
  • 修改.env.prod，添加VUE_APP_PUBLIC_PATH
// ...
VUE_APP_PUBLIC_PATH="https://cdn.com/"
  • 修改vue.config.js文件
module.exports = {
  publicPath: process.env.VUE_APP_PUBLIC_PATH ? process.env.VUE_APP_PUBLIC_PATH : './'
}

开启Gzip压缩

  • 安装compression-webpack-plugin：npm i compression-webpack-plugin@6.1.1 --save-dev

备注：

  • webpack 3.x及以下版本使用compression-webpack-plugin v1.1.2
  • webpack 4.x版本使用compression-webpack-plugin v6.1.1
  • webpack 5.x及以上版本使用最新版的compression-webpack-plugin即可
  • 修改vue.config.js文件
const isPro = process.env.NODE_ENV === 'production'

module.exports = {
  // ...
  configureWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (isPro) {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            // 使用 gzip 压缩
            algorithm: 'gzip', 
            // 处理与此正则相匹配的所有文件
            test: /\.(js|css)$/,
            // 只处理大于此大小的文件
            threshold: 8192,
            // 最小压缩比达到 0.8 时才会被压缩
            minRatio: 0.8,
          })
        ]
      }
    }
  }
  // ...
}
  • 打包完成后，比较大的js文件和css文件会额外打包一个.gz文件

扩展

  • nginx对应配置如下
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 1;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/pngapplication/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;

创作不易，若本文对你有帮助，欢迎打赏支持作者！

 分享给好友：