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

Question

如何包含和初始化 javascript 文件 mymain.min.js这是在我的项目中使用 VueJs 和 webpack 的 Assets 文件夹中吗？

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

您误解了 resolve 的实际作用。这不是您放置实际捆绑在一起的 Javascript 代码的地方。

当您像这样指定解析别名时:

'@': resolve('src'),

它将确保在您使用时:

require('@/test')

它将解决为:

require('src/test')

这有助于防止到处都是亲戚路径，您还可以为较长的路径添加别名，以防止重新输入所有类型的路径。

你的 webpack 文件应该有一个 entry 属性来指定你的主要 uncompiled javascript 文件。

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

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

ma​​in.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