也许在8到9个月前，我用vue-cli创建了一个Webpacked Vue.js项目，并且能够进行修改，/build/webpack.dev.conf.js以使其在运行时将“已编译” index.html和JavaScript / CSS文件放入Flask应用程序的正确文件夹中npm run build。
我现在向其他人展示如何创建Vue.js / Flask应用程序，我发现vue-cli的工作方式似乎已经改变，因此我不再可以访问该/build/文件夹。
我阅读了文档，他们似乎说它现在抽象了Webpack的配置（“ 因为@ vue / cli-service抽象了Webpack的配置... ”），但是如果我想查看Webpack的配置选项，我可以做vue inspect > output.js。我这样做了，看不到八个月前进行更改时在其中更改的条目：
/build/webpack.prod.conf.js：
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
- ? 'index.html'
+ ? 'app.html'
: config.build.index,
- template: 'index.html',
+ template: 'app.html',
/build/webpack.dev.conf.js：
new HtmlWebpackPlugin({
- filename: 'index.html',
- template: 'index.html',
+ filename: 'app.html',
+ template: 'app.html',
/config/index.js：
module.exports = {
build: {
env: require('./prod.env'),
- index: path.resolve(__dirname, '../dist/index.html'),
- assetsRoot: path.resolve(__dirname, '../dist'),
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
+ index: path.resolve(__dirname, '../../server/templates/app.html'),
+ assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+ assetsSubDirectory: '',
+ assetsPublicPath: '/static/app',
It looks like the vue build command-line command can accept an argument that allows you to specify the output directory, but I need to specify two different directories: one for the HTML file (which should live in Flask's /templates/ folder), and another for the JavaScript / CSS code (which should go in Flask's /static/ folder).
默认情况下，生产文件内置于
/dist/Vue项目的子文件夹中，并且应该部署在服务器的根文件夹（“ /”）中。因此，您必须将它们复制到根目录才能从浏览器访问项目。由于这并不总是很方便，因此您可能希望将它们构建为部署在root 的子文件夹中，例如/subdir/vue_project/dist/。在这种情况下，请按照https://cli.vuejs.org/config/#publicpath上的建议重定向vue-cli以为此子文件夹构建项目文件。为此，请执行
vue ui，然后在localhost：8000打开cli 3.3+ UI Configuration窗口，然后将默认值更改为publicPathto/subdir/vue_project/dist/并保存更改。如果您希望返回开发（服务），请不要忘记在执行服务和访问localhost：8080之前将其设置
publicPath回/。