Question

如何使用带有webpack的VueJs包含和初始化项目中我资产文件夹中的javascript文件mymain.min.js？

Webpack.base.conf

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'sauJs': path.resolve(__dirname, '../src/assets/mymain.min.js'),
    }
  },

我还尝试将<script src="src/assets/mymain.min.js"></script>添加到我的index.html页面，但是我得到Cannot GET /src/assets/mymain.min.js

Answer 1

你误解了实际上的决心。这不是您放置实际捆绑在一起的Javascript代码的地方。

指定解析别名时：

'@': resolve('src'),

确保使用时：

require('@/test')

它将被解决为：

require('src/test')

这有助于防止所有地方的亲戚路径，并且您还可以使用较长的路径别名以防止重新输入所有类型的路径。

您的webpack文件应该有一个entry属性，用于指定您的主uncompiled个javascript文件。

module.exports = {
    entry: './example/main.js',
}

在main.js文件中，您可以导入要包含在捆绑包中的javascript文件。

<强> main.js

import Vue from 'vue';
// Or:
const vue = require('vue')
// Or(.js extension can be omitted):
import MyFile from './src/MyFile.js'

另一种方法是指定另一个entry属性，这是我个人没有做过的。

但这超出了本答案的范围。如果您想了解更多信息，请查看文档：

https://webpack.js.org/concepts/

如果你不想处理错综复杂的事情，这可能会让你的生活更轻松：

https://symfony.com/blog/introducing-webpack-encore-for-asset-management

或者：

https://github.com/JeffreyWay/laravel-mix

在Vue.js中加载外部Javascript文件

1 个答案: