"vue.config.js"文件在哪里？

Question

我刚开始学习Vue，但是我无法为我的容器设置环境。 我使用Cloud9，必须根据此链接分配我的主机以为Vue应用提供服务。

不幸的是，我找不到vue.config.js文件来完成此操作。

此外，在Vue文档中没有路径指示。 "如果它在您的项目根目录中存在..."但是如果没有呢？ 怎么办？ 可以去使用React吗？ :)

Vue版本：3.1.1

- mr.boris

---

只需在您项目的主目录（即您的package.json文件所在的位置）创建一个。 - Jns

可能是Vue Cli 3.0 where is the config file?的重复问题。 - str

Answer 1

请参见Vue CLI的文档：vue.config.js是一个可选的配置文件，如果在您的项目根目录（与package.json相邻）中存在，则将自动由@vue/cli-service加载。您也可以在package.json中使用vue字段，但请注意，在这种情况下，您将仅限于JSON兼容值。

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

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

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

- str

---

我希望您能在文档中加入一些诸如“您也可以手动在项目的根目录中创建此文件”的内容。请将该内容翻译成中文，不改变原意并尽可能使其更通俗易懂。 - mr.boris

@mr.boris 您可以在 GitHub 上编辑此页面，或 创建一个问题 来表达您的关注点 :) - str

这个文件在编译后还能修改吗？还是只能在编译前修改？（我们想要在多个环境中使用同一张图片） - Eric Brown - Cal

Answer 2

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

这是非常重要的文件，它在Vue项目中处于顶层位置。 人们通常使用旧式的多页方式。在vue.config.js中定义主要依赖页面是正确的做法。

我曾经创建过主要的单页应用程序（PWA），但我还需要一些其他页面。例如错误页面或谷歌验证。

您可以更改dev服务器端口、启用/禁用源映射或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')

- Nikola Lukic

Answer 3

如果您使用了vue-cli，那么它会在您的根目录下，像这样：

• 您的项目
  • node_module
  • public
  • src
  • ...
  • vue.config.js

如果您没有这个文件，那么您的项目不是vue-cli，而是vit-vue， 您的配置文件名称为vit.config.vue。

- Saeid