在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

來源

2017-07-27 ottz0

所以沒有選擇拉你的外部文件從'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

來源

2017-07-27 08:25:59

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

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

回答

相關問題