fix: public

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_` 开头的变量
+- `.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`">
+```

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({

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)
         ]);
 }

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';
 

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;
     }

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({

packages/fes-template-h5/src/pages/onepiece.vue

@@ -1,5 +1,6 @@
 <template>
     <div>{{fes}}</div>
+    <img :src="publicPath + 'logo.png'" />
 </template>
 <config>
 {
@@ -14,6 +15,7 @@ export default {
     setup() {
         const fes = ref('fes upgrade to vue3');
         return {
+            publicPath: process.env.BASE_URL,
             fes
         };
     }