vuecli3.9.1架构---部署打包配置区分三种环境，同时支持cdn打包，保证JS最小化的一条龙服务与请求封装案例

最新推荐文章于 2023-01-05 11:04:58 发布

置顶浮云中的神马-潘帅

最新推荐文章于 2023-01-05 11:04:58 发布

阅读量4.7k

点赞数

分类专栏： cnd vue3.0 prod vue.config.js

本文链接：https://blog.csdn.net/weixin_41404460/article/details/94717481

版权

vue3.0 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

cnd

1 篇文章 0 订阅

订阅专栏

prod

1 篇文章 0 订阅

订阅专栏

首先我的版本如下：

vue3.0文件构造简单，仅仅需要自定义vue.config.js即可

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录 不写则默认根目录
  outputDir: 'dist',
  assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
  // eslint-loader 是否在保存的时候检查
  // lintOnSave: 'error',
  devServer: {
    overlay: {
      warnings: true,
      errors: 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   webpack链接API，用于生成和修改webapck配置
  //部署打包html带引号
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
    config.plugin("html").tap(args => {
      args[0].minify = false;
      return args;
    });
  },
  //压缩打包文件大小
  configureWebpack: config => {
    // if (isProduction) {
    // config.plugins.push(new CompressionWebpackPlugin({
    //   algorithm: 'gzip',
    //   test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    //   threshold: 10240,
    //   minRatio: 0.8
    // }))
    config.externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios': 'axios',
      'jquery': '$',
      'moment': 'moment',
      'js-cookie': 'Cookies',
      'echarts': 'echarts',
      'tinymce/tinymce': 'tinymce'
    }
    // }
  },
  // configureWebpack: (config) => {// webpack配置，值位对象时会合并配置，为方法时会改写配置
  //   if (debug) { // 开发环境配置
  //     config.devtool = 'cheap-module-eval-source-map'
  //   } else { // 生产环境配置

  //   }
  //   Object.assign(config, { // 开发生产共同配置
  //     resolve: {
  //       alias: {
  //         '@': path.resolve(__dirname, './src')//设置路径别名
  //         //...
  //       }
  //     }
  //   })
  // },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置 配置高于chainWebpack中关于css loader的配置
  // css: {
  //   // 是否使用css分离插件 ExtractTextPlugin
  //   extract: true,
  //   // 开启 CSS source maps?是否在构建样式地图，false将提高构建速度
  //   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 构建时开启多进程处理babel编译
  //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: {
    // ...
  }
}

其次需要根目录下需要以下几个文件

.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

.env.development---这个对应本地地址打包环境

# just a flag
NODE_ENV = 'development'

# base api

VUE_APP_APIUrl = 'http://192.168.2.215:8002/v1'


# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production------这个对应正式环境

# just a flag
NODE_ENV = 'production'

# base api

VUE_APP_APIUrl = 'http://dsoaapi.dszj.com/v1'

#VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'

.env.test-----这个对应正式环境与本地打包环境中间的测试服务器上线环境

# just a flag
NODE_ENV = 'test'

# base api

VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'


# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

最后一步，修改package.json，主要修改为build:test与build:dev

{
  "name": "newsone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:test": "vue-cli-service build --mode test",
    "build:dev": "vue-cli-service build --mode development"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "element-ui": "2.7.2",
    "js-cookie": "^2.2.0",
    "jsonp": "^0.2.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "compression-webpack-plugin": "^3.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

这样我们就彻底完工了，那么只剩下一个小问题，很多人发现我的vue.config.js下有config.externals，这是因为我的public下的index.html需要cnd引入

<!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">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>newsone</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css">

</head>

<body>
  <noscript>
    <strong>对不起，您的浏览器不支持！</strong>
  </noscript>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
  <script src="js/tinymce.min.js"></script>
  <script src="js/web.js"></script>
  <!-- built files will be auto injected -->
</body>

</html>

各位道友，强烈建议大家在修改cdn地址的时候能够选择自己的版本号，我这个是我现在项目所需，具体项目的版本如果一成不变造成的后续问题我一概不保证哟

百度网盘源码地址：

链接：https://pan.baidu.com/s/102nc9oDKntPuj7U_NJSJIw
提取码：x1e9

github地址：

https://github.com/war3121w/vue3.9.1-.git

个人网址：http://www.pjjgrweb.com/

浮云中的神马-潘帅

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vuecli3.9.1架构---部署打包配置区分三种环境，同时支持cdn打包，保证JS最小化的一条龙服务与请求封装案例

首先我的版本如下：vue3.0文件构造简单，仅仅需要自定义vue.config.js即可const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { // 基本路径 publicPath: './', // 输出文...
复制链接

扫一扫