共计 2309 个字符,预计需要花费 6 分钟才能阅读完成。
vue 多我的项目多模块运行 / 打包
vue-cli4
为例,实现多我的项目的分模块打包。多我的项目之间共享组件和依赖,运行、打包互不烦扰。
一、装置
npm install -g @vue/cli
# OR
yarn global add @vue/cli
二、创立我的项目:
vue create my-project
# OR
vue ui
三、目录革新
所谓分模块打包,一个模块就是一个独立我的项目,各个模块能够配置成独立的文件。
首先,新增目录:models
、template
,一个寄存模块文件,一个寄存模块模板。
别离在模块、模板的目录,创立两个我的项目(目录):beijing
、tianjin
models
- beijing
- tianjin
template
- beijing
- tianjin
- 把
src
下的App.vue
和main.js
复制到我的项目目录 - 把
public
下的index.html
复制到模板目录
留神
App.vue
中的图片和组件的援用门路
四:配置革新
cross-env
跨平台环境变量的工具,在默认创立好的我的项目里,新增这个依赖:
yarn add cross-env
每个我的项目都有开发 / 生产环境,须要新增 4 个脚本命令:
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
+"dev:beijing": "cross-env MODEL_NAME=beijing vue-cli-service serve",
+"build:beijing": "cross-env MODEL_NAME=beijing vue-cli-service build",
+"dev:tianjin": "cross-env MODEL_NAME=tianjin vue-cli-service serve",
+"build:tianjin": "cross-env MODEL_NAME=tianjin vue-cli-service build"
},
根本配置:
// vue.config.js
module.exports = {
outputDir: "dist/", // 我的项目输入目录
assetsDir: "static", // 动态资源目录
publicPath: "./", // vue-cli3.3 以上版本
// baseUrl: "./", // vue-cli3.3 以下版本
filenameHashing: false, // 生产环境敞开 hash
productionSourceMap: false, // 生产环境敞开 jsmap
devServer: {}};
到这一步,最好运行一次默认打包配置,示意新增的目录和文件没有影响默认配置
本例中援用了公共的动态资源和组件:src/assets/logo.png
、src/components/HelloWorld.vue
如果能够失常打包,接下来就是配置多模块,能想到多模块打包,传统配置必然很熟了,不再赘述,请看正文 …
残缺配置:
// vue.config.js
const path = require('path');
function resolve(dir) {return path.join(__dirname, dir);
}
const config = {
beijing: {
pages: {
index: {
title: "北京我的项目",
filename: "index.html",
entry: "models/beijing/main.js",
template: "template/beijing/index.html"
}
},
devServer: {}},
tianjin: {
pages: {
index: {
title: "天津我的项目",
filename: "index.html",
entry: "models/tianjin/main.js",
template: "template/tianjin/index.html"
}
},
devServer: {}},
};
let modelName = process.env.MODEL_NAME || "";
let outputDir = modelName ? `dist/${modelName}/` : "dist/";
module.exports = {...config[modelName],
outputDir: outputDir, // 我的项目输入目录
assetsDir: 'static', // 动态资源目录
publicPath: "./", // vue-cli3.3 以上版本
// baseUrl: './', // vue-cli3.3 以下版本
filenameHashing: false, // 生产环境敞开 hash
productionSourceMap: false, // 生产环境敞开 jsmap
// 内部扩大
configureWebpack: {
externals: {
vue: 'Vue',
vuex: 'Vuex',
}
},
// 设置别名
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('@img', resolve('public/static/img'));
},
devServer: {}};
只管模板设置在
template
目录,动态资源门路还是绝对public
目录
我这的 java
我的项目集成的是 FreeMarker
,复制对应的我的项目模板index.html
后缀改成.ftl
每次前端打包对应的环境配置之后,把 dist
目录的文件同步到 java
我的项目的 static
目录
五、打包后果
北京我的项目:
天津我的项目:
正文完