前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3+element-plus+router+vuex+axios从零开始搭建(2)

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_ENVBASE_URL 是两个特殊变量,在代码中始终可用

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

在根目录下创建以下文件

代码语言:javascript
复制
.env	全局默认,任何环境都加载合并	
.env.development	开发环境下的配置文件	
.env.production	    生产环境下的配置文件	

.env.development 内容写

代码语言:javascript
复制
NODE_ENV="development"              //开发环境
BASE_URL="http://localhost:3000/"   //开发环境接口地址

.env.production 线上环境

代码语言:javascript
复制
NODE_ENV="production"  //生产环境
BASE_URL="url"         //生产环境的地址

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

代码语言:javascript
复制
  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 相关

代码语言:javascript
复制
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

更多配置项

代码语言:javascript
复制
'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

代码语言:javascript
复制
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"));
  }
};

其他

关于sass(scss)、less、postcss、stylus等的用法与区别

CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。

参考

从0到1搭建Element的后台框架

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • .env+vue.config.js
    • 开发环境与线上环境配置
      • 只在本地有效的变量
    • vue.config.js配置
      • 创建vue.config.js
      • 更多配置项参考
  • 其他
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档