这次开发的项目，没有采用vue 全应用开发模块，采用传统的html页面通过script标签引入开发的 ，经webpack打包过的vue组件 js 文件。
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path');
module.exports = {
mode: 'development',
//mode: 'production',
entry: './src/index.js',
output: {
filename: 'index.js?[hash]',
path: path.resolve(__dirname, 'dist'),
library: 'placeSearch', //library指定的就是你使用require时的模块名
libraryTarget: 'umd', //打包格式，选umd支持node和浏览器2种执行坏境
umdNamedDefine: true
},
//添加external，解决以<script>标签形式使用打包后的组件时，出现vue未定义
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
hotReload: true // 关闭热重载
}
},
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
]
},
resolve:{
modules: ["node_modules", path.resolve(__dirname, "app")],
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}我的项目 package.json配置文件：
{
"name": "VuePlace",
"version": "1.0.1",
"private": true,
"scripts": {
"serve": "webpack-dev-server --hot",
"build": "webpack"
},
"devDependencies": {
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
}
}
项目的目录结构
js
- dist
-src
- component
-- Slide.vue
-- Navmenu.vue
………
- index.js
每次通过 npm run build 编译vue的组件后，得到/dist/index.js 文件，可以在你的html页面通过script标签引入。
src/index.js 的代码 是把所有的组件 通过windows.Vue.component 挂载到全局变量。
import PlaceSearch from "./component/PlaceSearch.vue";
import PlaceForm from "./component/PlaceForm.vue";
import Sizeinput from "./component/Sizeinput.vue";
import SiteAPI from './component/SiteAPI.js';
/**
* 把组件加入到全局Vue里面，之后可以在任何地方通过html标签方式
* 调用组件
*/
if (typeof window !== 'undefined' && window.Vue) {
window.SiteAPI = SiteAPI;
/**
* <place-search />
*/
window.Vue.component('place-search', PlaceSearch);
// 新增表单
window.Vue.component('place-form', PlaceForm);
// 尺寸和手动输入
window.Vue.component('place-size-input', Sizeinput);
}好了，本文内容全部结束，感谢你的阅读，希望对你有所帮助。
