专栏首页solate 杂货铺vue3+element-plus+router+vuex+axios从零开始搭建(2)

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

.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 文件配置全局环境变量

在根目录下创建以下文件

.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"));
  }
};

其他

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

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

参考

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    1.下载node, 不要使用最新的版本element-plus组件没支持到最新的版本。

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

    现在在store文件夹下面新建四个文件state.js, mutations.js, getters.js, actions.js

    solate
  • Vite开发快速入门

    Vite (法语意为 "快速的",发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的...

    xiangzhihong
  • 10分钟简单的了解下 Vite 相关内容

    Vite已经出来很久了,新版本也比较稳定,有没有打算入手一下,推荐下面这篇文章。

    前端达人
  • 从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

    Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!...

    XPoet
  • Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践

    而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。

    Sneaker-前端公虾米
  • 这几款基于vue3和vite的开箱即用的中后台管理模版,让你yyds!

    我们都知道 vue3 已经发布一年多了,相关的生态也在慢慢建立,很多公司也在尝试用 vue3 来开发自己的应用系统。但是由于生态的不完善以及缺乏成熟方案的落地,...

    徐小夕
  • 从 Vite 与 Vue 开始的 D3 数据可视化之旅

    这是一个极其简单的并尽可能面向未来的新手教程,它将指导你简单地使用 Vite 启动 Vue 的脚手架,并开始 D3 数据可视化的相关开发。而你无需 Vue 相关...

    云游君
  • Vue3发布半年我不学,摸鱼爽歪歪,哎~就是玩儿

    是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:“直接学 Vue 3 就行了,基础概念是一模一样的。”

    程序员十三
  • 使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目

    已经两周没有发文了,自己临时有点事耽误了,在这里向大家表示深深地歉意。今天,我们使用vite2.0+vue3+ts来开发一个demo项目。

    用户3806669
  • 做个开源博客学习Vite2 + Vue3 (一)搭建项目

    不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟...

    用户1174620
  • Electron13+Vue3+ElementPlus模仿macOS桌面版后台系统框架

    electron-vue3-macOS 一款整合vite2.x+electron13跨平台构建模仿mac桌面UI后台管理系统。

    andy2018
  • 一步步使用SpringBoot结合Vue实现登录和用户管理功能

    前后端分离开发是当今开发的主流。本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能。通过这...

    三分恶
  • 关于 vue3 + typescript 项目中常用的知识点汇总

    在实际项目开发中,常常会遇到这么一个场景,某一个路由是不需要渲染到侧边栏导航上的,此时我们可以给该路由添加一个hidden属性来实现。

    前端达人
  • 使用 Vue3 重构 Vue2 项目(长文)

    2020年9月18日,vue3正式版发布了,前几天把文档整体读了一遍,感触很深,可以解决我项目中的一些痛点,于是就决定重构之前那个vue2的开源项目。

    coder_koala
  • 使用Vue完成前后端分离开发Spring,Django,Flask(一)

    本篇题为 使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发 将通过一个项目整合(一前端项目对应三个后端项目),完成一个简单...

    双鬼带单
  • 每天学一点 Vue3(一) CND方式的安装以及简单使用 js脚本的引用方式数据绑定和UI库的使用Vuex状态管理的简单使用路由的简单使用

    感觉vue3的新特性很舒服,这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。

    用户1174620
  • 全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask 完成Vue前后端分离开发)

    本系列文章将从一个完整的项目是如何开发的过程进行编写,期间会涉及前端、后端和一些运维的知识。

    双鬼带单
  • 解锁 Vue3 全家桶 + TS 的正确姿势

    https://juejin.cn/post/6980267119933931551

    @超人

扫码关注云+社区

领取腾讯云代金券