vue3

记录一点东西

差不多一年没用vue了，恰巧公司接了个vue的项目，重温，记录一下遇到的问题。我这里用的是vuecli3 和webpack4 + elementUI + iconfont 想起什么记什么。。。 ——————- 安装就不说了。。现在创建项目需要 vue create 项目名字

1、打包路径问题

打包发布的时候，需要配置路径'/' 变成'./',我就找不到配置文件去哪里了。。。翻阅了一会儿文档之后,发现之前的vue.config.js变成可选的了，需要我们自己在根目录自己创建，就是package.json同级别。文件里面下面这样就可以了，就可以打包发布了。

  module.exports = {
      // 选项...
    baseUrl: './'
  }

打包

  npm run build

打包完成需要跑服务才会运行dist文件，本地的话可以安装一个node的serve，

  npm install -g serve
  serve -s dist

2、console.log报错

在按照了eslint后使用console.log会报错，这个时候需要配置eslint，结果发现vuecli3找不到配置文件了，翻了翻，在package.json中找到了一个字段eslintConfig，好的，就是你了，找到rules字段，然后修改一下配置就好了。

  "rules": {
      "no-console": "off"
    }

3、引入iconfont的问题

下载好的文件里面找到iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff放到assets里面，我建了个文件夹font 然后在main.js里面import进来

  import './assets/font/iconfont.css'

这里有一个问题，如果你没有css-loader的话，需要先安装一下 npm install css-loader –save-dev 然后就可以正常使用了

4、配置代理跨域

本地开发的时候，调用一个接口，提示跨域，配置一下vuecli的代理服务就好了。在根目录建一个vue.config.js，输入下面的配置就好了。

  module.exports = {
      // 选项...
    baseUrl: './',
    devServer: {
      proxy: '接口的域名或者ip'
    }
  }

5、axios发送请求接口要求是formdata格式

如果单纯的new一个FormData()对象的话，传过去的值带引号，后台接收不成功，这个时候就需要用一个模块-qs 引入：const qs = require("qs"); 使用：qs.stringify(obj) 使用qs的时候有一些注意事项，如果对象里面的值有数组的话会转成arr[0], arr[1]….这种格式，如果不想或者不需要变成这样的话就需要先使用JSON.stringify(arr)。

6、axios发送请求加密

修改密码的时候需要加密，我项目这里加密方法是sha1,使用的是一个纯js的加密插件crypto-js 安装cnpm install crypto-js --save 没有cnpm的话需要先安装cnpm，我这里用的是sha1加密，就只说sha1的使用了，其他加密方法，比如md5之类的类似。引入：import sha1 from 'crypto-js/sha1' 使用：sha1( pass ).toString()

7、写全局配置

我这里因为有需求全局控制baseURL，所以写了全局。我在components下新建了一个Global.vue，你自己随意。我的代码一部分

  // 在script标签里面
  const baseURL= '你的url';
  export default
    {
      baseURL  //服务器地址
    }

然后在main.js里面注入到根实例里面

  import myGlobal from './components/Global'
  Vue.prototype.myGlobal = myGlobal

使用：在js里面使用的话就可以直接this.myGlobal.baseURL,在HTML里面使用就可以直接``

猫说