大概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/
文件夹中).