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 @@ { @@ -14,6 +15,7 @@ export default { setup() { const fes = ref('fes upgrade to vue3'); return { + publicPath: process.env.BASE_URL, fes }; }