Vue学习笔记一:Vue-cli3搭建Vue项目

1. 搭建一个vue-cli3项目

npm install -g @vue/cli
vue create study-vue​.

2.vue-cli3全局环境变量的使用

(1)根目录下新建.env,添加环境变量

VUE_APP_URL=https://mp.yc.info/api

(2)使用环境变量

data () {
    return {
      url: process.env.VUE_APP_URL
    }
}
  • 注意:
    1.修改了环境变量后,要重启服务才好用
    2.VUE_APP_URL,前面必须是VUE_APP_*

(3)开发环境变量,新建.env.development,当前启动的是开发环境,使用时自动获取此文件下的变量。

(4)生产环境变量,新建.env.production,当npm run build时,使用时自动获取此文件下的变量,如果不写这个,会使用.env里的。

3.vue-cli3全局配置

根目录下,新建vue.config.js

module.exports = {
  publicPath: '/', // 根路径
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
  lintOnSave: false, // 是否开启ESLint保存检测,有效值 true || false || 'error'
  devServer: {
    open: false, // dev启动是否自动开启浏览器页面
    host: '127.0.0.1', // 0.0.0.0真机测试时候用
    port: 8081,
    https: false,
    hotOnly: false,//热更新(webpack已实现了,这里false即可)
    // 配置跨域
    proxy: {
      'api': {
        target: 'http://localhost:5000/api/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^api': ''
        }
      }
    }
  }
} 

推荐阅读更多精彩内容