vue3+element-plus+router+vuex+axios从零开始搭建(2)

solate

发布于 2021-06-21 20:14:00

1.4K0

发布于 2021-06-21 20:14:00

文章被收录于专栏：solate 杂货铺

.env+vue.config.js

这一章主要环境相关配置

开发环境与线上环境配置

下面是vue cli 配置模式和环境变量：模式和环境变量

vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化，这也带来了许多问题，很多配置需要自己配置，

由于2.0x版本中直接在config/文件夹下面配置开发环境与线上环境，3.0x则需要自己配置。

首先配置开发环境，在项目根目录下新建三个文件，如果有测试环境还可以再加一个。

属性名必须以VUE_APP_开头，比如VUE_APP_XXX 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中， NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

vue3.0 .env 文件配置全局环境变量

在根目录下创建以下文件

.env	全局默认，任何环境都加载合并	
.env.development	开发环境下的配置文件	
.env.production	    生产环境下的配置文件

.env.development 内容写

NODE_ENV="development"              //开发环境
BASE_URL="http://localhost:3000/"   //开发环境接口地址

.env.production 线上环境

NODE_ENV="production"  //生产环境
BASE_URL="url"         //生产环境的地址

现在我们如何在项目中判断当前环境呢？我们可以根据process.env.BASE_URL来获取它是线上环境还是开发环境，下一章中会有运用

  if(process.env.NODE_ENV='development'){
    console.log( process.env.BASE_URL) // http://localhost:3000/
  }else{
    console.log( process.env.BASE_URL) // url
  }

只在本地有效的变量

有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。

.local 也可以加在指定模式的环境文件上，比如 .env.development.local 将会在 development 模式下被载入，且被 git 忽略。

vue.config.js配置

2.x里面webpack相关的配置项直接在项目的build/webpack.base.conf.js里面配置，而3.x完全在vue.config.js中配置

创建vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

由于项目初始化的时候没有vue.config.js配置文件，因此我们需要在项目根目录下新建一个vue.config.js配置项。

配置具体参数可以参考：配置参考

这个项目主要是配置三个东西，第一个就是目录别名alias，另一个是项目启动时自动打开浏览器，最后一个就是处理css。

webpack 相关

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
    chainWebpack: config => {
        //设置别名
        config.resolve.alias
            .set('@',resolve('src'))
    },
    devServer: {
        open:true  //打开浏览器窗口
    },
    css: {
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
        }
    }
}

更多配置项参考

vue-cli4的配置vue.config.js

更多配置项

'use strict'
module.exports = {
    publicPath: './',  //基本路径
    outputDir: 'dist', //构建时的输出目录
    assetsDir: 'static',//放置静态资源的目录
    indexPath: 'index.html',//html 的输出路径
    filenameHashing: true,//文件名哈希值
    lintOnSave: true,//是否在保存的时候使用 `eslint-loader` 进行检查。
 
    //组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
    //template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
    //runtime-only：将template在打包的时候，就已经编译为render函数
    //runtime-compiler：在运行的时候才去编译template
    runtimeCompiler: false,
    
    transpileDependencies: [],//babel-loader 默认会跳过 node_modules 依赖。
    productionSourceMap: false,//是否为生产环境构建生成 source map？
 
    //调整内部的 webpack 配置
    configureWebpack:: () => {},
 
    chainWebpack: () => {},
 
    // 配置 webpack-dev-server 行为。
    devServer: {
        open: true, //编译后默认打开浏览器
        host: '0.0.0.0',  //域名
        port: 8080,  // 端口
        https: false,  //是否https
        //显示警告和错误
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target: 'http://asoyy.xyz',
                changeOrigin: true, //是否跨域
                ws: false, //是否支持websocket
                secure: false, //如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

添加别名alias

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
 
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js")
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@router", resolve("src/router"))
      .set("@store", resolve("src/store"));
  }
};