Flands Blog HomeArchivesTags
老项目升级vue-cli 3.0

主要对以前的svg模块、条件编译、打包版本号进行兼容

预备

查看文档，使用vue-cli 3.0创建项目，然后进行修改

package.json

此处为条件编译，用production判断是否为打包，mode判断环境

1
2
3
4
5
6
"scripts": {
  "startt": "vue-cli-service serve --mode test",
  "startp": "vue-cli-service serve --mode pro",
  "buildt": "cross-env NODE_ENV=production vue-cli-service build --mode test",
  "buildp": "cross-env NODE_ENV=production vue-cli-service build --mode pro"
},

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const path = require('path')
const VersionPlugin = require('./version-plugin.js');

const plugins = []
// 版本号部分
// build都打包版本号
if (process.env.NODE_ENV === 'production') {
  plugins.push(new VersionPlugin({
    path: process.env.VUE_APP_DIR,
    versionDirectory: process.env.VUE_APP_DIR
  }))
}

module.exports = {
  outputDir: process.env.VUE_APP_DIR,
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  // 以下为svg模块
  configureWebpack: {
    module: {
      rules: [{
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
          include: path.resolve('src/icons'),
          options: {
            symbolId: 'icon-[name]'
          }
        },
        {
          test: /\.(svg)(\?.*)?$/,
          loader: 'url-loader',
          exclude: path.resolve('src/icons'),
          options: {
            limit: 10000,
            name: 'static/img/[name].[hash:7].[ext]'
          }
        },
      ]
    },
    plugins,
  },
  chainWebpack: config => {
    // 此处要清空，否则会应用默认的loader选项
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
  },
  parallel: require('os').cpus().length > 1,
}

.env.test

必须以VUE_APP开头

1
2
VUE_APP_CLIENT = 'test'
VUE_APP_DIR = 'dist_test'

index.html

放到了public/index.html下，而不是根目录