vue3创建项目(五)vite配置端口号

news2024/12/23 7:52:19

 Vue3配置代理跨域和服务端口等配置,可以在 vite.config.js 进行配置。(类似用 vue-cli 的 vue.config.js)

https://cn.vitejs.dev/config/

第一步:首先在根目录下面创建vue.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// const { resolve } = require('path')
export default defineConfig({
	// 起个别名,在引用资源时,可以用‘@/资源路径’直接访问
	// resolve: {
	// 	alias: {
	// 		"@": resolve(__dirname, "src"),
	// 	},
	// },
	plugins: [vue()],
	// 配置前端服务地址和端口
	server: {
	    host: '0.0.0.0',//自定义主机名
		port: 8991,//自定义端口
		// 是否开启 https
		https: false,
	},
	// 设置反向代理,跨域
	// proxy: {
	// 	'/api1': {
	// 		// 后台地址
	// 		target: 'http://127.0.0.1:8990/',
	// 		changeOrigin: true,
	// 		rewrite: path => path.replace(/^\/api1/, '')
	// 	},
	// 	'/api2': {
	// 		// 后台地址
	// 		target: 'http://127.0.0.1:8956/',
	// 		changeOrigin: true,
	// 		rewrite: path => path.replace(/^\/api2/, '')
	// 	}
	// },
})

直接运行 npm run dev

 

 

 

 附:常用配置项,需要的时候开箱即用

// vue.config.js
 
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
 
module.exports = {
  // 项目部署的基本路径,默认假设你的应用将会部署在域名的根部,比如,https://www.vue-cli.com/
  // 如果你的应用是部署在一个子路径下,那么你需要在这里指定子路径,比如,
  // 如果你部署在 https://www.my-vue.com/my-app/; 那么将这个值改为 “/my-app/”
  publicPath: "/",
 
  // 将构建好的文件输出到哪里 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  // 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
  outputDir: "dist",
 
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: "static",
 
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',
 
  // 默认在生成的静态资源文件名中包含hash以控制缓存
  filenameHashing: true,
 
  // 是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在@vue/cli-plugin-eslint 被安装之后生效。
  // 设置为 true 时, eslint-loader 会将 lint 错误输出为编译警告。默认情况下, 
  // 警告仅仅会被输出到命令行,且不会使得编译失败。
  // 如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'error'。
  // 这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
  lintOnSave: true,
 
  // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 
  // template 选项了,但是这会让你的应用额外增加 10kb 左右。
  runtimeCompiler: false,
 
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式
  // 转译一个依赖,可以在这个选项中列出来。
  transpileDependencies: [],
 
  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: true,
 
  // 向 CSS 相关的 loader 传递选项
  css: {
    // 当为true时,css文件名可省略 module 默认为 false
    modules: false,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true,开发环境下是 false
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    /*为预处理器 loader 传递自定义选项*/
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";`,// 预设全局css变量
      },
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    },
  },
 
  // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 
  // webpack 配置进行更细粒度的修改。
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("utils", resolve("src/utils"))
      .set("api", resolve("src/api"));
  },
 
  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于
  //一个内核时自动启用,仅作用于生产构建。
  parallel: require("os").cpus().length > 1,
 
  // 向 PWA 插件传递选项。
  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
 
  // 所有 webpack-dev-server 的选项都支持。
  // 注意:有些值像 host、port 和 https 可能会被命令行参数覆写。
  // 有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
  // 本地服务配置
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    open: true //配置自动启动浏览器  open: 'Google Chrome'-默认启动谷歌
 
    // 配置跨域代理
    proxy: {
    // 说明:
    // 浏览器有同源策略不支持跨域,但服务器没有,通过proxy配置,将对于接口服务器的请求代理到本地服务器,
    // 再由本地服务器转发到接口服务器(target目标服务器),所以设置代理后,
    // 接口请求路径会变成代理服务器地址,即本地地址localhost 或者 127.0.0.1
 
    // 配置:
    // '/api'可以是任何值,表示以/api开头的请求,实际项目中所以路径以/api开头的请求都会被本地服务器转发
    '/api': {
      // target指想要被代理的后端接口服务器地址(目标路径)(真正请求的服务器地址)
      target: 'http://192.168.6.267:8080',
      // pathRewrite用以在发送请求时,重写请求路径
      // 如果在实际的请求路径中你不希望出现/api,那么可以重写路径,在请求路径中去掉/api,如下所示
      pathRewrite: {
        // 举例:
        // 如果你的接口服务地址为:http://192.168.6.267:8080,你的接口路径为/base/company/list
        // 那么为了可以使用/api代理,你可以在接口路径前添加/api,如:/api/base/company/list
        // 那么你的请求就会被本地服务代理到真正的接口地址,解决了跨域问题
        // 但是你的请求路径就会变成:http://192.168.6.267:8080/api/base/company/list,路径中多余/api
        // 那么你可以通过重写(如下方式)去掉/api
        // 或者你可以选择将/api改为/base,就不需要重写路径了,具体的使用根据业务来决定
        '^/api': ''
      }
    }
  },
  },
 
  // 第三方插件选项
  // 这是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项。
  pluginOptions: {}
};

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/698988.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CubeMx打不开/不兼容大于java8的解决方案

最近在学习stm32,需要用到cubemx,但是软件都装好了却死活打不开 最后才发现是java版本的问题,cubemx只支持java8(至少java14,16,17,20亲测都不行) 于是便把java8又装了回来,但是又有新问题 不知道为什么,即便环境变量已…

Hologres弹性计算在OLAP分析上的实践和探索

作者:王奇 阿里云Hologres研发 简介: 1、本文介绍了OLAP分析在大数据分析中的位置 2、分析并介绍目前大数据OLAP遇到的分析性能、资源隔离、高可用、弹性扩缩容等核心问题 3、解析阿里云Hologres是如何解决极致性能、弹性、业务永续、性价比等核心刚需的…

从0到1 关于MySQL的数据库和表

一个字:细腻。 目录 1. 下载和安装MySQL及其可视化工具 2. 启动MySQL和客户端连接 3. 创建和查看数据库和表 1. 下载和安装MySQL及其可视化工具 下载和安装MySQL推荐博客: mysql数据库安装(详细)_体会!的博客-CSD…

Idea部署 web项目时出现404问题

新手开发过程中发布项目可能会遇到这种问题,看到404,证明代码没有问题,地址有问题。 解决方法:(此解决方法适用于,发布程序后首页能正常显示的情况下,点击任何菜单直接404) 先看发布…

【NoSQL之 Redis配置与优化】

目录 一、关系数据库与非关系型数据库1、关系型数据库和非关系型数据库区别(1)数据存储方式不同(2)扩展方式不同(3)对事务性的支持不同 2、非关系型数据库产生背景总结 二、Redis简介1、Redis 具有以下几个…

数据库实验—触发器

为Students创建一触发器,并给出正反实例的SQL语句:当插入或修改一条学生记录时,确保此学生的入学年龄在14~40岁之间。 create trigger TRIGGER_Stu on Students for insert , update as declare age int select ageyear(getdate())-year(Sbir…

微信小程序——二维码推广海报

&#x1f60a;博主&#xff1a;爱学习的Akali King &#x1f60a;本文核心&#xff1a;本地图片和接口返回二维码制作一体化canvas海报 目录 创建一个画布通过canvas API绘制图像细节1 长按保存细节2 创建一个画布 在微信小程序中&#xff0c;我们使用<canvas>标签来创建…

微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

1、H5页面代码 wx.miniProgram.reLaunch({ url: /pages/index/index?appId${您的微信小程序appId} });//触发小程序刷新页面获取appId 微信小程序appId查看方法&#xff1a; 1&#xff09;有后台登录权限的情况下&#xff1a;登录微信公众平台后&#xff0c; 微信公众平台微信…

linux——在VMware Workstation中配置固定IP

第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a; 切换到root用户下&#xff1a;用vim打开文件&#xff0c;进行上面五处修改。 改动后的文件为&#xff1a;

C++刷题第三天

203 移除链表元素 题目描述 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 解题思路…

python3开发-火车票分析助手

目录 背景 思路 步骤&#xff1a; 代码示例 总结 背景 随着人们出行需求的增加&#xff0c;火车票的购买和使用变得越来越普遍。然而&#xff0c;对于火车票的信息和数据进行分析&#xff0c;可以帮助我们更好地了解旅行趋势、优化行程规划等。而Python是一门功能强大的编程…

finalshell使用方法,前端vue更新服务器项目

首先我们看看finalshell的整体 上面是xshell一样&#xff0c;可以输命令 上面是WinSCP一样&#xff0c;可以直接拖文件&#xff0c;下载&#xff0c;上传&#xff0c;可视化视图 1.下载服务器文件 服务器文件通过Jenkins打包上去的&#xff0c;首先我们把文件下载到本地 点击…

skimage.io.imread与cv2.imread读取图片的通道顺序不同

先说结论 skimage.io.imread读取的通道顺序为RGB, opencv读取的通道顺序为BGR。 在基于通道处理数据时注意区别。 示例如下&#xff1a; 对于一张彩色的村庄鸟瞰图&#xff0c; 其中道路为蓝色&#xff0c;我们提取出蓝色通道 并将其转为二值图输出&#xff0c;已验证提取出的…

深度学习视角下的视频息肉分割

结直肠癌(CRC)是全球第二大致命癌症和第三大常见的恶性肿瘤&#xff0c;据估计每年会在全球范围内造成数百万人发病和死亡。结直肠癌患者在第一阶段的生存概率超过95%&#xff0c;但在第四和第五阶段却大幅下降到35%以下。因此&#xff0c;通过结肠镜、乙状结肠镜等筛查技术对阳…

mysql基础1——发展起源、数据类型、基础安装

文章目录 一、基本了解1.1 DBMS数据库管理系统1.2 主流关系型数据库1.3 数据表概念1.4 关系型数据库的组成1.5 数据类型1.5.1 数值型1.5.1.1 整数型1.5.1.2 小数型 1.5.2 字符串型1.5.3 日期时间型1.5.4 枚举型 二、yum安装mariadb三、二进制安装mysql 一、基本了解 前提背景&a…

Flutter嵌套地狱

override Widget build(BuildContext context) {return Column(children: <Widget>[Container(height: 45,child: Row(children: <Widget>[SizedBox(width: 30,),Icon(Icons.notifications,color: Colors.blue,),SizedBox(width: 30,),Expanded(child: Text(消息中…

华为OD机试真题 Python 实现【计算网络信号】【2023Q2 200分】

一、题目描述 网络信号经过传递会逐层衰减&#xff0c;且遇到阻隔物无法直接穿透&#xff0c;在此情况下需要计算某个位置的网络信号值。 注意&#xff1a; 网络信号可以绕过阻隔物array[m][n]的二维数组代表网格地图&#xff0c;array[i][j]0代表i行j列是空旷位置&#xff…

大众点评搜索基于知识图谱的深度学习排序实践

转子&#xff1a;https://tech.meituan.com/2019/01/17/dianping-search-deeplearning.html 1. 引言 挑战与思路 搜索是大众点评App上用户进行信息查找的最大入口&#xff0c;是连接用户和信息的重要纽带。而用户搜索的方式和场景非常多样&#xff0c;并且由于对接业务种类多…

自学黑客(网络安全),一般人我劝你还是算了吧(自学网络安全学习路线--第十八章 网络监听及防御技术)【建议收藏】

文章目录 一、自学网络安全学习的误区和陷阱二、学习网络安全的一些前期准备三、自学网络安全学习路线一、网络监听概述1、网络监听概念2、相关网络基础 二、监听技术1、局域网中的硬件设备简介2、共享式局域网的监听技术3、交换式局域网的监听技术 三、网络监听工具举例1、Tcp…

聚观早报 | 富士康被起诉;苹果公司股价再创新高

今日要闻&#xff1a;富士康被起诉&#xff1b;苹果公司股价再创新高&#xff1b;微信否认文件传输助手是真人&#xff1b;抖音外卖主攻60元以上套餐&#xff1b;消息称谷歌放弃研发AR智能眼镜 富士康被起诉 6 月 28 日消息&#xff0c;据外媒报道&#xff0c;美国电动卡车初…