diff --git a/docs/zh/guide/template.md b/docs/zh/guide/template.md
index 72310ae7..db3f6bf0 100644
--- a/docs/zh/guide/template.md
+++ b/docs/zh/guide/template.md
@@ -1,4 +1,4 @@
-# HTML模板
+# HTML和静态资源
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能,默认 HTML模板 是:
```html
@@ -50,4 +50,34 @@ export default {
除上述 `html-webpack-plugin` 三点之外,Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内:
- `NODE_ENV`
- `FES_ENV`
-- `.env` 文件中以 `FES_APP_` 开头的变量
\ No newline at end of file
+- `.env` 文件中以 `FES_APP_` 开头的变量
+
+## 处理静态资源
+
+放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。
+
+### `public` 文件夹
+
+任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径来引用它们。
+
+* 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中,你需要通过 <%= BASE_URL %> 设置链接前缀:
+
+```html
+
+```
+
+* 在模板中,你首先需要向你的组件传入基础 URL:
+
+```html
+setup() {
+ return {
+ publicPath: process.env.BASE_URL
+ }
+}
+```
+
+然后:
+
+```html
+
+```
diff --git a/packages/create-fes-app/templates/app/h5/.fes.js b/packages/create-fes-app/templates/app/h5/.fes.js
index ff0906c4..ad88fd84 100644
--- a/packages/create-fes-app/templates/app/h5/.fes.js
+++ b/packages/create-fes-app/templates/app/h5/.fes.js
@@ -8,15 +8,10 @@ export default {
// __VUE_PROD_DEVTOOLS__: false
},
request: {
- dataField: 'fileTemplateList'
+ dataField: ''
},
html: {
- options: {
- title: '海贼王'
- }
- },
- imageMinimizer: {
- disable: false
+ title: '拉夫德鲁'
},
extraPostCSSPlugins: [
pxtoviewport({
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/define.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/define.js
index 1a6b5556..1f07fc8e 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/define.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/define.js
@@ -7,6 +7,6 @@ export default function createDefineWebpackConfig({
}) {
webpackConfig.plugin('define')
.use(webpack.DefinePlugin, [
- resolveDefine({ define: config.define })
+ resolveDefine(config)
]);
}
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js
index 7b08e919..9d03d087 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js
@@ -15,7 +15,7 @@ export default async function createHtmlWebpackConfig({
const htmlOptions = {
filename: '[name].html',
...config.html,
- templateParameters: resolveDefine(null, true)
+ templateParameters: resolveDefine(config, true)
};
htmlOptions.title = htmlOptions.title || 'fes.js';
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js
index e9a41c2b..c94c7a3b 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js
@@ -10,6 +10,8 @@ export default function resolveDefine(opts = {}, raw) {
}
});
+ env.BASE_URL = opts.publicPath;
+
if (raw) {
return env;
}
diff --git a/packages/fes-template-h5/.fes.js b/packages/fes-template-h5/.fes.js
index eb14e8c3..9ce624cb 100644
--- a/packages/fes-template-h5/.fes.js
+++ b/packages/fes-template-h5/.fes.js
@@ -7,13 +7,13 @@ export default {
// __VUE_OPTIONS_API__: true,
// __VUE_PROD_DEVTOOLS__: false
},
+ base: '/#/app/#',
+ publicPath: '/',
request: {
- dataField: 'fileTemplateList'
+ dataField: ''
},
html: {
- options: {
- title: '海贼王'
- }
+ title: '拉夫德鲁'
},
extraPostCSSPlugins: [
pxtoviewport({
diff --git a/packages/fes-template-h5/src/pages/onepiece.vue b/packages/fes-template-h5/src/pages/onepiece.vue
index 3df0594e..879d17e8 100644
--- a/packages/fes-template-h5/src/pages/onepiece.vue
+++ b/packages/fes-template-h5/src/pages/onepiece.vue
@@ -1,5 +1,6 @@
{{fes}}
+
{
@@ -14,6 +15,7 @@ export default {
setup() {
const fes = ref('fes upgrade to vue3');
return {
+ publicPath: process.env.BASE_URL,
fes
};
}