vue-cli3

最近将公司项目升级到vue-cli3.0，遇到一些问题，记录一下

一、安装

1. node环境需要8.9及更高版本

2. 关于旧版本 

     Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

    但是我本地没有卸载也可以用，如果卸载了要用到vue-cli2的话需要桥接一下

3. 安装vue-cli3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、搭建项目

1. vue create vue-test

空格选择需要的特性

选择scss 和 选择 eslint编码规范，这里我选择prettier

选择何时进行代码检测，此处选择在保存时进行检测

选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

保存这个配置

2. 创建完成后

// 进入到vue-test项目
cd vue-test
// - 启动服务
npm run serve
// - 打包编译
npm run build

3. 目录
三、配置vue.config.js
vue.config.js是一个可配置文件，用来写一些配置，如代理、打包、地址等配置

/* module.exports = {
  plugins: {
    autoprefixer: {}
  }
}; */
const path = require('path')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

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

module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    // 配置页面环境变量
    config.plugin('define').tap((args) => {
      args[0]['process.env']['CEMSYS_API'] = `"${process.env.CEMSYS_API}"`
      return args
    })
    // 配置静态资源图片
    config.module.rules.delete('images')
    // 清除svg默认的处理方式
    config.module.rules.delete('svg')
  },
  configureWebpack: {
    devtool: 'source-map',
    externals: {
      'AMap': 'AMap',
      'AMapUI': 'AMapUI',
      'EZUIPlayer': 'EZUIPlayer'
    },
    resolve: {
      extensions: ['.js', '.vue', '.json', '.css'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src')
      }
    },
    performance: {
      hints: false
    },
    plugins: [
      // new BundleAnalyzerPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
          include: [resolve('src/icons')],
          options: {
            symbolId: 'icon-[name]'
          }
        },
        {
          test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,
          exclude: [resolve('src/icons')],
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 4096,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: 'img/[name].[hash:8].[ext]'
                  }
                }
              }
            }
          ]
        }
      ]
    }
  },
  devServer: {
    proxy: {
      '/sjgzxt': {
        target: 'http://www.100Link.net',
        changeOrigin: true,
        ws: true,
        secure: false
      }
    }
  }
}

四、环境变量

在.env里面写一些需要的变量

为一个特定模式准备的环境文件(如 .env.production)将会比一般的环境文件 (如 .env) 拥有更高的优先级，此外，Vue CLI启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写

CEMSYS_API=https://www.100link.net/cas
VUE_APP_BASE_API=/sjgzxt

五、将已有项目升级到vue-cli3.0

1. 使用vue-cli创建新的项目
2. 删除新项目中src下的内容
3. 将原有项目src中的源码拷贝到新项目的src中
4. 将原有项目的index.html及favicon.ico拷贝到新项目的public中
5. 将原有的*static文件夹也拷贝到新项目的public中
6. 修改package.json、.babelrc等文件，保持和原有项目一致即可 ps: 旧package.json的开发环境依赖和新的不一样，可以不复制
7. request.js里面的有用到之前的变量需要修改一下

六、需解决的问题

1. 升级后可能css样式会紊乱，可能是因为写在全局里面了

vue框架中每个vue页面的style可以加上scoped属性，如下所示，代表仅对当前页面生效，否则在运行项目时页面样式会出现杂乱

<style scoped lang="scss">

不重名也可以避免样式错乱