vlambda博客
学习文章列表

vueCli3 从搭建-打包-发布：

.搭建(cmd创建项目)

1.快速创建新项目

2.选择配置

启动命令：npm  run serve

3.配置vue项目

在src下面新建文件：

a.新建apis文件：用于放置axios的配置文件axios.js和接口文件；

b.新建i8n文件：用于存放不同语言配置；

c.新建mixins文件：用于存放Vue全局混入文件；

d.新建router文件：用于存放路由配置；

在文件下面新建index.js：存放处理逻辑；

代码如下：

import Vue from 'vue';

import Router from 'vue-router';

import routes from './routes';

Vue.use(Router);

// 路由配置

const router = new Router({

   mode: 'history',

   base: process.env.BASE_URL,

   routes,

   scrollBehavior(to, from, positon) {

      if (positon) {

         return positon;

      } else {

         return {x: 0, y: 0};

      }

   }

});

router.beforeEach((to, from, next) => {

   next();

});

router.afterEach((to, from, next) => {

   window.scrollTo(0, 0);

});

export default router;

export default router;

routes.js：存放配置路径。

代码如下：

// 动态加载组件路径

function load(component) {

  return resolve => require([`views/${component}`], resolve)

}

const routes = [

  {

    path: "/",

    name: "SYSTEM-LOGIN",

    component: load("system/login"),

    redirect: "/",

    meta: {

      layout: "blank",

      title: "登录"

    }

  },

  {

    path: "/dashboard",

    name: "DASHBOARD",

    component: load("dashboard/dashboard"),

    meta: {

      title: "首页"

    }

  }

]

export default routes

e.新建store文件：用于存放Vue全局状态变化配置；

f.新建styles文件：用于存放全局公用文件配置；

g.新建utils文件：用于存放工具类；

h.新建views文件：用于存放所有.vue文件

4.常用页面配置

/********************************开始配置***********************************************/

在views文件下新建：

->新建system文件夹，在此文件夹下面;

   ->新建login.vue文件：登录页面信息

->新建dashboard文件夹，在此文件夹下面：

   ->新建dashboard.vue文件：登录之后的第一个文件

/********************************结束配置***********************************************/

5.进入element-ui

安装：npm i element-ui -save

在main.js中全局配置：

6.vue.config.js文件配置

   ->基本配置：

const path = require('path')

function resolve (dir) {

  return path.join(__dirname, './', dir)

}

module.exports = {

  publicPath: "/", // 默认'/'，部署应用包时的基本 URL

  outputDir: "dist",

  assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录

  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

  productionSourceMap: false, // 生产环境的 source map

  configureWebpack: config => {}, // 用于webpack配置

  chainWebpack: config => {}

}

  ->扩展配置：CDN配置、Gzip压缩(js、css)、去掉注释、去掉console.log

完整版代码：

 const path = require("path")

const UglifyJsPlugin = require("uglifyjs-webpack-plugin") // 去掉注释

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin // 打包分析

// gzip --start

const CompressionWebpackPlugin = require("compression-webpack-plugin")

const productionGzip = true // 是否使用gzip

const productionGzipExtensions = ["js", "css"] // 需要gzip压缩的文件后缀

// gzip --end

function resolve(dir) {

  return path.join(__dirname, "./", dir)

}

// cdn预加载使用

const externals = {

  vue: "Vue",

  "vue-router": "VueRouter",

  vuex: "Vuex",

  axios: "axios",

  "element-ui": "ELEMENT",

  "js-cookie": "Cookies",

  nprogress: "NProgress"

}

const cdn = {

  // 开发环境

  dev: {

    css: [

      "https://unpkg.com/element-ui/lib/theme-chalk/index.css",

      "https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css"

    ],

    js: []

  },

  // 生产环境

  build: {

    css: [

      "https://unpkg.com/element-ui/lib/theme-chalk/index.css",

      "https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css"

    ],

    js: [

      "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",

      "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js",

      "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js",

      "https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js",

      "https://unpkg.com/element-ui/lib/index.js",

      "https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.min.js",

      "https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"

    ]

  }

}

module.exports = {

  publicPath: "/", // 默认'/'，部署应用包时的基本 URL

  outputDir: "dist",

  assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录

  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

  productionSourceMap: false, // 生产环境的 source map

  // 用于webpack配置

  configureWebpack: config => {

    const newConfig = {}

    // 生产环境

    if (process.env.NODE_ENV === "production") {

      newConfig.externals = externals // 生产环境npm包转cdn

      newConfig.plugins = [] // 插件

      // 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip

      productionGzip &&

        newConfig.plugins.push(

          new CompressionWebpackPlugin({

            test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),

            threshold: 8192,

            minRatio: 0.8

          })

        )

      // 去掉注释

      newConfig.plugins.push(

        new UglifyJsPlugin({

          uglifyOptions: {

            output: {

              comments: false // 去掉注释

            },

            compress: {

              warnings: false,

              drop_console: true,

              drop_debugger: false,

              pure_funcs: ["console.log"] //移除console

            }

          }

        })

      )

    }

    return newConfig

  },

  chainWebpack: config => {

    // 取消首页对其他模块的prefetch

    config.plugins.delete("prefetch-index")

    // 压缩图片

    config.module

    //   .rule("images")

    //   .use("image-webpack-loader")

    //   .loader("image-webpack-loader")

    //   .options({

    //     mozjpeg: { progressive: true, quality: 65 },

    //     optipng: { enabled: false },

    //     pngquant: { quality: "65-90", speed: 4 },

    //     gifsicle: { interlaced: false },

    //     webp: { quality: 75 }

    //   })

    // 使用cdn

    config.plugin("html").tap(args => {

      if (process.env.NODE_ENV === "production") {

        args[0].cdn = cdn.build

      }

      if (process.env.NODE_ENV === "development") {

        args[0].cdn = cdn.dev

      }

      return args

    })

    // 打包分析

    if (process.env.IS_ANALYZ) {

      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [

        {

          analyzerMode: "static"

        }

      ])

    }

    // // svg loader

    // const svgRule = config.module.rule("svg") // 找到svg-loader

    // svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后

    // svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录

    // svgRule // 添加svg新的loader处理

    //   .test(/\.svg$/)

    //   .use("svg-sprite-loader")

    //   .loader("svg-sprite-loader")

    //   .options({

    //     symbolId: "icon-[name]"

    //   })

    // // 修改images loader 添加svg处理

    // const imagesRule = config.module.rule("images")

    // imagesRule.exclude.add(resolve("src/icons"))

    // config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

  }

  // devServer: {}

}

.项目区分环境配置

在根目录添加不同环境的配置文件：

.env.development // 开发环境

.env.prod // 生产环境

.env.test // 测试环境

最后在package.json中配置script:

"scripts": {

    "serve": "vue-cli-service serve",

    "build:prod": "vue-cli-service build --mode prod",

    "build:test": "vue-cli-service build --mode test",

    "lint": "vue-cli-service lint"

  }

.axios配置

1.在utils文件下创建request.js

2.配置request.js

完整代码如下：

import axios from "axios"

// 创建 axios 实例

const service = axios.create({

  baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url

  timeout: 10000

})

//  请求拦截器

service.interceptors.request.use(

  config => {

    config.headers["Content-Type"] = "application/json;charset=UTF-8"

    config.headers["Accept"] = "application/json"

    config.headers["Request-From"] = "mobile"

    let token = sessionStorage.getItem("loginToken") || null

    // 如果token不为null，否则传token给后台

    if (token) {

      config.headers["Token"] = token

    }

    return config

  },

  error => {

    return Promise.reject(error)

  }

)

// 响应拦截器

service.interceptors.response.use(

  response => {

    const res = response.data

    //届时根据后端返回success或者code值判断

    if (res.success === true) {

      return res

    } else {

      return res

    }

  },

  error => {

    //响应错误

    return Promise.reject(error)

  }

)

export default service

在apis文件夹下创建一个common.js，调用封装后的axios：

import request from "@/utils/request"

export function aaa(obj) {

  return request({

    url: "/aa", // url = base url + request url

    method: "post",

    data: obj

  })

}

export function bbb(obj) {

  return request({

    url: "/bb", // url = base url + request url

    method: "get",

    params: obj

  })

}

.打包

1.打包分析：webpack-bundle-analyzer

安装：npm install webpack-bundle-analyzer --save

在vue.config.js中写入:

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin // 打包分析

chainWebpack: config => {

    // 打包分析

    if (process.env.IS_ANALYZ) {

      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [

        {

          analyzerMode: "static"

        }

      ])

    }

  }