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

Question

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

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

Vue 文档 中也没有路径指示。

"if it's present in your project root..." 但如果不是呢？不管怎样，去使用 React 吧？ :)

Vue 版本：3.1.1

原文由 mr.boris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请参阅 Vue CLI 的文档：

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

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

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

因此，只需自己创建文件即可。它是完全可选的。

原文由 str 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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')

原文由 Nikola Lukic 发布，翻译遵循 CC BY-SA 4.0 许可协议