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

问题描述：

如何包含并初始化JavaScript文件mymain.min.js，该文件位于我的项目中使用VueJs和webpack的我的资产文件夹中？在Vue.js中加载外部JavaScript文件

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

所以没有选择拉你的外部文件从'NPM'中，将它拉到本地，在主文件之前用它作为脚本标记，或者将它编织到代码中（如果它很小）？ Webpack并不是为了拉入外部文件我相信你可以滥用它来做到这一点，但我也确定可能有更好的方法。 –

我曾尝试将此添加到index.html，但我正在获取无法获取/src/assets/mymain.min.js – ottz0

我刚才描述的4种方法中的哪一种您尝试过？ –

答

你是误会了什么决心，实际上做。这不是你将Javascript代码放在一起的地方。

当您指定的决心别名，像这样：

'@': resolve('src'),

这将确保当您使用：

require('@/test')

它会得到解决到：

require('src/test')

这有助于防止各地的亲属路径，并且还可以使用更长的路径来防止重新键入t下摆所有类型。

您的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

谢谢，我在我的main.js文件中使用了const SauJs = require（'./ assets/main'）和Vue.use（SauJs），并在.eslintignore中添加了该文件 – ottz0

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

相关推荐