我如何更改VUE中的主文件夹

Question

我是 Vue 新手。我只是通过 vue create my-project-name.

创建 vue 项目

工作正常。

但是如何更改文件夹结构？将 src 和 public 包装在 client 文件夹中？

app folders:
|-client
  |- src
  |- public
|- package.json

并且仍然使用所有的 cli 功能？

Answer 1

更改 serve 和 build 中的脚本 package.json:

vue-cli-service serve 到 vue-cli-service serve client/src
vue-cli-service build 到 vue-cli-service build client/src

和 devServer.contentBase 在 vue.config.js

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'client/public')
  }
}

Answer 2

我想用@vue/cli 3 做完全相同的事情，但 Ruslan 的建议没有用。另外，如果您查看文档，它会写成：

Usage: vue-cli-service serve [options]

Options:

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

我显然无法想象它如何与您提供的代码示例一起工作。

Answer 3

最近偶然发现了这个问题并找到了解决方法。不幸的是，Ruslan 的方法对我不起作用。

这是我的基本全栈文件夹结构。

为了使其正常工作，我将以下内容添加到 vue.config.js

const path = require('path')

module.exports = {
  pages: {
    index: {
      entry: 'client/src/main.js',
      template: 'client/public/index.html'
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'client/src')
      }
    }
  },
  chainWebpack: config => {
    config
      .plugin('copy')
      .use(require('copy-webpack-plugin'), [[{
        from: path.resolve(__dirname, 'client/public'),
        to: path.resolve(__dirname, 'dist'),
        toType: 'dir',
        ignore: ['.DS_Store']
      }]])
  }
}

这应该

设置正确的条目和模板文件。
恢复 @ 别名功能。
将文件从 public 文件夹复制到 dist 文件夹。

资源

Answer 4

@Mintonne 的回答几乎对我有用，但是 'copy' 插件修改有问题。改编自关于这个 vue-cli 问题 https://github.com/vuejs/vue-cli/issues/1550

的回答

const path = require("path");

module.exports = {
    pages: {
        index: {
            entry: "client/src/main.js",
            template: "client/public/index.html"
        }
    },
    configureWebpack: {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "client/src")
            }
        }
    },
    devServer: {
        contentBase: path.join(__dirname, "client/public")
    },
    chainWebpack: config => {
        config.plugin('copy')
            .tap(([pathConfigs]) => {
                var conf = [{
                    from: path.resolve(__dirname, 'client/public'),
                    to: path.resolve(__dirname, 'dist')
                }]
                if (!pathConfigs) {
                    pathConfigs = conf
                } else {
                    pathConfigs.concat(conf)
                }
                return [pathConfigs]
            })
    }
};

我如何更改VUE中的主文件夹

How can I change main folders in VUE

webpack

vue.js