mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
fix: public
This commit is contained in:
parent
877ddbad37
commit
ca112f6d2f
@ -1,4 +1,4 @@
|
|||||||
# HTML模板
|
# HTML和静态资源
|
||||||
|
|
||||||
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能,默认 HTML模板 是:
|
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能,默认 HTML模板 是:
|
||||||
```html
|
```html
|
||||||
@ -51,3 +51,33 @@ export default {
|
|||||||
- `NODE_ENV`
|
- `NODE_ENV`
|
||||||
- `FES_ENV`
|
- `FES_ENV`
|
||||||
- `.env` 文件中以 `FES_APP_` 开头的变量
|
- `.env` 文件中以 `FES_APP_` 开头的变量
|
||||||
|
|
||||||
|
## 处理静态资源
|
||||||
|
|
||||||
|
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。
|
||||||
|
|
||||||
|
### `public` 文件夹
|
||||||
|
|
||||||
|
任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径来引用它们。
|
||||||
|
|
||||||
|
* 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中,你需要通过 <%= BASE_URL %> 设置链接前缀:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
```
|
||||||
|
|
||||||
|
* 在模板中,你首先需要向你的组件传入基础 URL:
|
||||||
|
|
||||||
|
```html
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
publicPath: process.env.BASE_URL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
然后:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img :src="`${publicPath}my-image.png`">
|
||||||
|
```
|
||||||
|
@ -8,15 +8,10 @@ export default {
|
|||||||
// __VUE_PROD_DEVTOOLS__: false
|
// __VUE_PROD_DEVTOOLS__: false
|
||||||
},
|
},
|
||||||
request: {
|
request: {
|
||||||
dataField: 'fileTemplateList'
|
dataField: ''
|
||||||
},
|
},
|
||||||
html: {
|
html: {
|
||||||
options: {
|
title: '拉夫德鲁'
|
||||||
title: '海贼王'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
imageMinimizer: {
|
|
||||||
disable: false
|
|
||||||
},
|
},
|
||||||
extraPostCSSPlugins: [
|
extraPostCSSPlugins: [
|
||||||
pxtoviewport({
|
pxtoviewport({
|
||||||
|
@ -7,6 +7,6 @@ export default function createDefineWebpackConfig({
|
|||||||
}) {
|
}) {
|
||||||
webpackConfig.plugin('define')
|
webpackConfig.plugin('define')
|
||||||
.use(webpack.DefinePlugin, [
|
.use(webpack.DefinePlugin, [
|
||||||
resolveDefine({ define: config.define })
|
resolveDefine(config)
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,7 @@ export default async function createHtmlWebpackConfig({
|
|||||||
const htmlOptions = {
|
const htmlOptions = {
|
||||||
filename: '[name].html',
|
filename: '[name].html',
|
||||||
...config.html,
|
...config.html,
|
||||||
templateParameters: resolveDefine(null, true)
|
templateParameters: resolveDefine(config, true)
|
||||||
};
|
};
|
||||||
htmlOptions.title = htmlOptions.title || 'fes.js';
|
htmlOptions.title = htmlOptions.title || 'fes.js';
|
||||||
|
|
||||||
|
@ -10,6 +10,8 @@ export default function resolveDefine(opts = {}, raw) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
env.BASE_URL = opts.publicPath;
|
||||||
|
|
||||||
if (raw) {
|
if (raw) {
|
||||||
return env;
|
return env;
|
||||||
}
|
}
|
||||||
|
@ -7,13 +7,13 @@ export default {
|
|||||||
// __VUE_OPTIONS_API__: true,
|
// __VUE_OPTIONS_API__: true,
|
||||||
// __VUE_PROD_DEVTOOLS__: false
|
// __VUE_PROD_DEVTOOLS__: false
|
||||||
},
|
},
|
||||||
|
base: '/#/app/#',
|
||||||
|
publicPath: '/',
|
||||||
request: {
|
request: {
|
||||||
dataField: 'fileTemplateList'
|
dataField: ''
|
||||||
},
|
},
|
||||||
html: {
|
html: {
|
||||||
options: {
|
title: '拉夫德鲁'
|
||||||
title: '海贼王'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
extraPostCSSPlugins: [
|
extraPostCSSPlugins: [
|
||||||
pxtoviewport({
|
pxtoviewport({
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>{{fes}}</div>
|
<div>{{fes}}</div>
|
||||||
|
<img :src="publicPath + 'logo.png'" />
|
||||||
</template>
|
</template>
|
||||||
<config>
|
<config>
|
||||||
{
|
{
|
||||||
@ -14,6 +15,7 @@ export default {
|
|||||||
setup() {
|
setup() {
|
||||||
const fes = ref('fes upgrade to vue3');
|
const fes = ref('fes upgrade to vue3');
|
||||||
return {
|
return {
|
||||||
|
publicPath: process.env.BASE_URL,
|
||||||
fes
|
fes
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user