vue-cli 4.0 搭建项目配置😍

2,398 阅读5分钟

🤞搭建项目配置🤞

下面是我搭建项目的一些基本配置,有需要的小伙伴可以自行参考!

注意:

1)全局属性以 VUE_APP 开头

  • 注意:vue-cli.3.0之后全局变量名要加上VUE_APP
  • 例如:VUE_APP_API

2)项目配置时,es5和es6的导入导出混淆使用会报错:

  • 报错信息:Uncaught TypeError: Cannot assign to read only property 'exports' of object '
  • 报错原因:在webpack 2中不允许混用 import 和 module.exports,同一文件中使用会报错
  • 解决方法:例如下面的接口配置,可以把 module.exports = http 改成: export default http

一、项目搭建

1)自定义搭建项目步骤:

  vue create my-project  
    //default 是使用默认配置
    // Manually select features 是自定义配置

  Manually select features 
  // 上下箭头进行选择,选择需要的文件, 按空格键选中(括号中标 * 号表示选中)
  Use history mode for router?
  // 选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置
  Pick a CSS pre-processor 
  // css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现
  Pick a linter/formatter config
  // 选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多
  Pick additional lint features
  // 然后选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit   fix 或者 commit 的时候检查,建议第一个
  Where do you prefer placing config for Babel,PostCSS,ESLint,etc?
  // 下面就是如何存放配置了,In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中本着项目结构简单的想法,可以选择第二个
  Save this as a preset for future projects?(y/N) 
  // 最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

2)项目启动:

  • 命令行:npm run serve 运行 (后期配置后改为 npm run dev)
  • 注意:项目运行时有时候会遇到sass报错的问题:运行时sass文件中找不到binding.node 文件.note

-运行项目时报错:

  • Missing binding E:\my-project\node_modules\node-sass\vendor\win32-x64-83\binding.node Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 14.x 报错原因:
  • 在 node_modules\node-sass\vendor\win32-x64-83\ 文件下找不到 binding.node文件; 解决方法:
  • 方法一:重新编译node-sass : npm rebuild node-sass
  • 方法二: 从 github.com/sass/node-s… 下载相应版本的 binding.node 文件,并放入到 node-sass\vendor下。
  • 如:下载的 win32-x64-51_binding.node 文件,则将该文件重命名为:binding.node 后放入到 node-sass\vendor\win32-x64-51 目录下即可。

二、相关配置

1).环境变量配置:(注意:vue-cli.3.0之后全局变量名要加上VUE_APP)

1. 根目录下创建 .env文件(我比较常用以下三种):

.env.delelopment => 开发环境

  # just a flag
  ENV = 'development'

  # base api
  VUE_APP_BASE_API = 'http://XXX'

.env.production => 生产环境

  # just a flag
  ENV = 'production'

  # base api
  VUE_APP_BASE_API = 'http://XXX'

.env.testing => 测试环境

  NODE_ENV = production

  # just a flag
  ENV = 'testing'

  # base api
  VUE_APP_BASE_API = 'http://XXX'

2. package.json文件中进行相关配置:

  "scripts": {
      "dev": "vue-cli-service serve",
      "build:prod": "vue-cli-service build",
      "build:test": "vue-cli-service build --mode testing",
      "dev:serve": "vue-cli-service serve --mode development --inline",
      "dev:build": "vue-cli-service build --mode production",
      "dev:test": "vue-cli-service build --mode test",
      "lint": "vue-cli-service lint"
  }

3. 运行/打包:

  npm run dev  // 项目运行
  npm run build:test  // 测试包
  npm run build:prod  // 生产包

2).vue.config.js:

根目录下创建vue.config.js文件,进行相关配置:

  module.exports={
      publicPath:process.env.NODE_ENV==='production'?'./':'/'
  }

以上配置注意两点:

  1. vue-cli 3.3以上配置"baseUrl",3.3之后再配置会报错:"baseUrl is not allowed" 因为vue-cli 3.3版本后后将baseUrl废除了,使用publicPath代替,将baseUrl换为publicPath就好了。

  2. publicPath 接收 string 类型的 value;默认值为 '/'(/是根目录) publicPath 设置的是部署应用包的基本 URL,不是项目打包出来的文件存放的位置。 publicPath 也可以设置为''或者'./',设置成相对路径后可以任意部署。

3).封装http请求:

注意:在webpack 2中不允许混用 import 和 module.exports,同一文件中使用会报错,(所以下面的配置中把原先的 module.exports改成了export default)

0.1)api => request.js

  /**
   * 封装http 请求方法
   */
  const { log } = console
  const axios = require('axios');
  import Vue from 'vue';
  import { Toast } from 'vant';
  Vue.use(Toast);

  const http = (params) => {
    return new Promise((resolve, reject) => {
      let adminToken = localStorage.getItem('adminToken'); // 获取缓存中的token值
      let token = { 'Admin-Token': adminToken || '' }
      let contentType = params.header || '' //设置后端需要的常用的格式就好,(默认:{"Content-Type": "application/json"})特殊情况调用的时候单独设置

      // 请求拦截
      axios.interceptors.request.use(
        config => {
          if (adminToken) {
            config.headers = Object.assign({}, token, contentType)
          }
          return config
        },
        error => {
          Toast({
            message: error.message,
            duration: 1000
          });
          reject(error)
        }
      )

      axios({
        baseURL: process.env.VUE_APP_BASE_API + params.url, // url = base url + request url
        method: params.method || 'POST', // 默认为POST,可以不写
        headers: Object.assign({}, token, contentType),
        timeout: 30000, // request timeout
        data: params.data, // post请求参数
        params: params.param // get请求参数

      }).then(res => {
        //接口访问正常返回数据
        if (res.status == 200) {
          if (res.data.code == '9001') {  // 与后台约定的code值,这里9001为token失效时的值
            Toast({
              message: res.data.message,
              duration: 1000
            });
            reject(res.data.message)
          } else {
            resolve(res.data)
          }
        } else {
          //2. 操作不成功返回数据,以toast方式弹出响应信息,如后端未格式化非操作成功异常信息,则可以统一定义异常提示
          let errMsg = res.data.message
          Toast({
            message: errMsg,
            duration: 1000
          });
        }
      }).catch(err => {
        Toast({
          message: err.message,
          duration: 1000
        });
        reject(err)
      })
    })
  }

  // module.exports = http
  export default http

0.2)api => index.js

  // const http = require("./request.js");
  import http from './request'

  // 这里配置了不同服务器下的接口
  const panel = '/query1';
  const common = '/query2';

  var url = {
    list: `${common}/data/list`,
    submit: `${panel}/data/submit`,
  }

  const API = {
    list(param) {
      return http({
        url: url.list,
        method: 'GET',  // get请求
        param: param
      })
    },
    submit(data) {
      return http({
        url: url.submit,  // post 请求不需要写,(默认就是post)
        data: data
      })
    }

  }
  // module.exports = API
  export default API

0.3)main.js

  import API from "./api/index.js" // 接口
  Vue.prototype.VUE_APP_API = API; //接口

  // 顺便添加一个动态title的配置
  // 设置动态title
  router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
      document.title = to.meta.title
    } else {
      document.title = 'title'
    }
    next()
  });

0.4)页面使用:

  let data = {} // 接口参数
  this.VUE_APP_API.adminConfirm(data)
      .then(res=>{})
      .catch(err=>{})

4).路由配置:

  import Vue from 'vue'
  import Router from 'vue-router'
  import VueRouter from 'vue-router'

  Vue.use(Router)

  const routes = [{
      path: '/index',
      name: '首页',
      component: resolve => require(['@/views/home/index'], resolve)
    }
  ]

  const router = new VueRouter({
    routes
  })

  export default router;