Question

我是Vue的新人。我只是按vue create my-project-name创建了vue项目。

工作正常。

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

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

仍然使用所有cli功能？

Answer 1

更改as SomeType中的SomeType和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

Answer 2

最近偶然发现此问题，并找到了解决方法。不幸的是，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 3

我正在尝试使用@ 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 4

@Mintonne的答案几乎对我有用，但是在修改“复制”插件时遇到了问题。改编自关于这个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中更改主文件夹

4 个答案: