大概8-9个月前,我创建了一个网页包Vue.使用vue cli的js项目,能够修改/build/webpack.dev.conf.js,使其在运行npm run build时将"编译"index.html和JavaScript/CSS文件放在我的Flask应用程序的正确文件夹中.

我现在向其他人展示如何创建Vue.js/Flask app和我看到vue cli的工作方式似乎已经改变,因此我无法再访问/build/文件夹.

我阅读了文档和they seemed to say,它现在抽象掉了Webpack配置("Since @vue/cli-service abstracts away the webpack config..."),但如果我想查看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',

看起来vue build命令行命令可以接受一个参数,允许您指定输出目录,但我需要指定两个不同的目录:一个用于HTML文件(应该位于Flask的/templates/文件夹中),另一个用于JavaScript/CSS代码(应该位于Flask的/static/文件夹中).

推荐答案

我只需要使用最新的Vue CLI为一个新项目执行此操作,而且非常简单:我只需要在Vue项目的顶层有一个名为vue.config.js的文件,其中需要以下代码:

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/SPA"),
  assetsDir: "../../static/SPA"
}

Warning: Vue-CLI will delete the contents of whatever folders you specify to use for its output.为了解决这个问题,我在templates/static/个目录中创建了"SPA"文件夹.

还要注意,assetsDir是相对于outputDir指定的.

Vue.js相关问答推荐

vue3中的转换可以在滑入但不能滑出时工作

如何防止Nuxt3重新加载时滚动跳到网页顶部

Vue Router中.getRoutes()获取的路由顺序优化建议

为什么 Vue 在将设置脚本中的计算(computed)属性渲染到模板时找不到变量

如何在 VUE.js 中重新刷新时保持多层 b-collapse 菜单打开?

手动触发对观察到的对象/数组的更新

如何在 vue 路由中导航到 Bootstrap-vue 选项卡中的特定选项卡?

带有热重载的 docker 容器上的 Vue.js 应用程序

如何在 vuejs 自定义指令中传递动态参数

在 SPA VueJS 中全局声明 mapState 和 mapMutations

如何从 .vue 文件中导出多个对象

如何在 Vue 类组件中定义过滤器?

如何从 v-for 创建的对象中绑定多个类?

在 nuxt.js 页面中包含外部 javascript 文件

使用 Firebase Auth for Google 将匿名用户转换为注册用户

Vuejs - 使用 v-if 切换的保持活动组件

Vue.js webpack:如何获取目录中的文件列表?

vue-router如何持久化导航栏?

Vue.js 单向绑定表单

Vue $refs 对象的类型为 unknown未知