“vue.config.js”文件在哪里？

Posted 2023-02-22

【中文标题】“vue.config.js”文件在哪里？

【英文标题】：Where is "vue.config.js" file?

【发布时间】：2019-04-10 21:18:07

【问题描述】：

我刚刚开始学习 Vue，但我根本无法为我的容器设置环境。 我使用 Cloud9，我必须根据 this link 分配我的主机来服务 Vue 应用程序。

很遗憾，我找不到vue.config.js 文件来执行此操作。

Vue docs 中也没有路径指示。

"if it's present in your project root..." 但如果不是呢？无论如何，去使用 React？ :)

Vue 版本：3.1.1

【问题讨论】：

只要在你的项目主目录（你的package.json文件所在的地方）创建一个

Vue Cli 3.0 where is the config file?的可能重复

【参考方案1】：

见documentation of Vue CLI：

vue.config.js 是一个可选配置文件，将自动 由@vue/cli-service 加载，如果它存在于您的项目根目录中（下一个 到package.json)。也可以使用package.json中的vue字段，但是 请注意，在这种情况下，您将被限制为与 JSON 兼容的值 仅限。

文件应该导出一个包含选项的对象：

// vue.config.js
module.exports = 
    // options...

所以只需自己创建文件。它是完全可选的。

【讨论】：

我希望这几句话 also you may create this file in the root of your project manually 也在文档中..

@mr.boris 您可以通过edit the page on GitHub 或create an issue 表达您的担忧:)

编译后可以修改这个文件吗？还是以前？ （我们希望在多个环境中使用 1 张图片）

【参考方案2】：

很简单，只需在项目的ROOT文件夹中创建文件vue.config.js即可。

它非常重要的文件。它位于 vue 项目之上。 人们通常在旧式风格中使用不止一页。 vue.config.js 是定义主要依赖页面的正确位置。

我曾经创建过主单页应用程序 (pwa)，但我也需要 其他一些页面。例如错误页面或谷歌验证。

您可以更改开发服务器端口、sourceMap 启用/禁用或 PWA 配置...

module.exports = 
  pages: 
    'index': 
      entry: './src/main.ts',
      template: 'public/index.html',
      title: 'Welcome to my vue generator project',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    ,
    'bad': 
      entry: './src/error-instance.ts',
      template: 'public/bad.html',
      title: 'Error page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    ,
    /* Disabled - Only one time
    'googleVerify': 
      entry: './src/error-instance.ts',
      template: 'public/somelink.html',
      title: 'Error page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    ,
    */

  ,
  devServer: 
    'port': 3000
  ,
  css: 
    sourceMap: false
  ,
  pwa: 
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
  ,

对于这个配置，这里是主实例文件：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue(
  store,
  render: h => h(App, 
     props:  error: 'You can not search for assets...' 
  ),
).$mount('#error')