解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名

news/2024/7/10 1:20:34 标签: vue

1.在vue项目根目录下新建vue.config.js(不是在src下面)
vue.config.js配置文件:


module.exports = {
  // 基本路径 baseURL已经过时
  publicPath: './',  
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
   // 是否使用css分离插件 ExtractTextPlugin
   extract: true,
   // 开启 CSS source maps?
   sourceMap: false,
   // css预设器配置项
   loaderOptions: {},
   // 启用 CSS modules for all css / pre-processor files.
   modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === 'darwin',
    disableHostCheck: true,
    host: 'www.test.com',//如果是真机测试,就使用这个IP
    port: 1234,
    https: false,
    hotOnly: false,
   before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
   // ...
  }
 }

2.配置域名:
vue.config.js文件找到 devServer: {}配置这两个参数:

 host: 'www.test.com',//自定义域名
 port: 1234,//自定义端口

在本地hosts末尾添加127.0.0.1 www.test.com
在这里插入图片描述

重启项目==>使用域名加端口号访问:http://www.test.com:1234


http://www.niftyadmin.cn/n/1845275.html

相关文章

react前端下载后端返回文件流(文件流下载excel、csv)

以前用vue框架的时候,写过不少下载上传的东西,当然包括后端返回文件流供前端下载,现在用react,牵扯到这个功能,又提起来说,有两种下载类型,一种是Excel,一种是Csv。 首先后端返回这种…

react跨组件传递数据(React.createContext以及useContext)

哇,学如逆水行舟呀,本来写项目一直用react全家桶,像数据传递这种,不是用公共状态管理dva管理,就是用父子组件那种props传递,但是契机到了,就用到了这个React.createContext,然后发现…

rules规则(包含回调函数规则)配置

这里总结了几个常用的规则,方便下次使用 必填,必选,邮箱,手机号,时间,数字,数组,字符长度, 以邮箱为例子与手机号为例 //这是一个邮箱的验证规则 rules: {email: [{requ…

react中的状态提升(子组件给父组件传值、多个子组件状态共享)

官方对这个状态提升的解释是: 在 React 中,将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中,便可实现共享 state。这就是所谓的“状态提升”。 看看官方文档给出的例子: // 这是子组件 class TemperatureInput e…

react使用qrcode.react生成扫描二维码

需求:在pc端可以根据当前环境(开发、生产等等)生成对应的二维码,手机扫码跳转至指定页面。 查了一圈,发现qrcode.react这个组件用的人最多,看了一下官网说明: var React require(react); var …

Antd Form.Item相互嵌套,里层的值修改最外层的值

标题可能有点拗口&#xff0c;意思是这样&#xff1a; <Form.Item nametotal_list><ChildrenCom /> </Form.Item>function InputGroup({ onChange }){ // 注意&#xff1a;这个参数onChange是接收的nametotal_list的onChange事件const handleChange(e,…

js正则表达式获取字符串中多个大括号{}中的内容,包括大括号并放入数组中

var str 订单号bai&#xff1a;{0}&#xff0c;交易商品&#xff1a;du{1}&#xff0c;初步估zhi价&#xff1a;{2}元; var array []; array str.match(/{(.*?)}/g) alert(array);//得到的结果是&#xff1a;{0}&#xff0c;{1}&#xff0c;{2}

react+Antd表单用Form.Item互相校验

表单中有两项&#xff1a;手机号和邮箱号&#xff0c;初始化都是必填&#xff0c;如果填了其中一项&#xff0c;则另一项为非必填&#xff0c;而且两项都各自有自己的rules校验规则&#xff0c;举例&#xff1a;在填了手机号后&#xff0c;邮箱号为非必填&#xff0c;但是又清空…