Vaadin 10+静态文件应该放在哪里? [英] Where should I place my Vaadin 10+ static files?
问题描述
在Vaadin 10-14中，应该将静态文件(例如CSS，JavaScript和Polymer模板)放在哪里?静态文件(例如图像)怎么样?
In Vaadin 10-14, where should I place my static files, such as CSS, JavaScript, and Polymer templates? How about static files such as images?
此外，如何在Vaadin中导入这些文件?带有npm的Vaadin 14和带有凉亭的Vaadin 10-13之间有区别吗?
Also, how do I import these files in Vaadin? Is there a difference between Vaadin 14 with npm and Vaadin 10-13 with bower?
推荐答案
所有路径都相对于项目根目录，例如pom.xml文件在Maven项目中的位置.
All paths are relative to the project root, e.g. where the pom.xml file is located in a Maven project.
使用@JsModule导入的JavaScript使用严格模式.除其他外，这意味着必须在window对象window.x = ...上定义全局变量，而不仅仅是x = ....
JavaScript imported using @JsModule uses strict mode. Among other things, this means that global variables must be defined on the window object, window.x = ..., instead of just x = ....
- CSS文件
-
@CssImport("./my-styles/styles.css")[1] -
/frontend/my-styles/styles.css
- CSS files
@CssImport("./my-styles/styles.css")[1]/frontend/my-styles/styles.css
-
@JsModule("./src/my-script.js")[1] -
/frontend/src/my-script.js
@JsModule("./src/my-script.js")[1]/frontend/src/my-script.js
-
new Image("img/flower.jpg", "A flower") -
/src/main/webapp/img/flower.jpg
new Image("img/flower.jpg", "A flower")/src/main/webapp/img/flower.jpg
- CSS文件
-
@CssImport("./my-styles/styles.css")[1] -
/frontend/my-styles/styles.css
- CSS files
@CssImport("./my-styles/styles.css")[1]/frontend/my-styles/styles.css
-
@JsModule("./src/my-script.js")[1] -
/frontend/src/my-script.js
@JsModule("./src/my-script.js")[1]/frontend/src/my-script.js
-
new Image("img/flower.jpg", "A flower") -
/src/main/resources/META-INF/resources/img/flower.jpg
new Image("img/flower.jpg", "A flower")/src/main/resources/META-INF/resources/img/flower.jpg
- CSS文件
-
@CssImport("./my-styles/styles.css")[1] -
/src/main/resources/META-INF/resources/frontend/my-styles/styles.css
- CSS files
@CssImport("./my-styles/styles.css")[1]/src/main/resources/META-INF/resources/frontend/my-styles/styles.css
-
@JsModule("./src/my-script.js")[1] -
/src/main/resources/META-INF/resources/frontend/src/my-script.js
@JsModule("./src/my-script.js")[1]/src/main/resources/META-INF/resources/frontend/src/my-script.js
-
new Image("img/flower.jpg", "A flower") -
/src/main/resources/META-INF/resources/img/flower.jpg
new Image("img/flower.jpg", "A flower")/src/main/resources/META-INF/resources/img/flower.jpg
- CSS文件
-
@StyleSheet("css/styles.css")[2] -
/src/main/webapp/frontend/css/styles.css
- CSS files
@StyleSheet("css/styles.css")[2]/src/main/webapp/frontend/css/styles.css
-
@HtmlImport("src/template.html") -
/src/main/webapp/frontend/src/template.html
@HtmlImport("src/template.html")/src/main/webapp/frontend/src/template.html
-
@JavaScript("js/script.js")[3] -
/src/main/webapp/frontend/js/script.js
@JavaScript("js/script.js")[3]/src/main/webapp/frontend/js/script.js
-
new Image("img/flower.jpg", "A flower") -
/src/main/webapp/img/flower.jpg
new Image("img/flower.jpg", "A flower")/src/main/webapp/img/flower.jpg
- CSS文件
-
@StyleSheet("css/styles.css")[2] -
/src/main/resources/META-INF/resources/frontend/css/styles.css
- CSS files
@StyleSheet("css/styles.css")[2]/src/main/resources/META-INF/resources/frontend/css/styles.css
-
@HtmlImport("src/template.html") -
/src/main/resources/META-INF/resources/frontend/src/template.html
@HtmlImport("src/template.html")/src/main/resources/META-INF/resources/frontend/src/template.html
-
@JavaScript("js/script.js")[3] -
/src/main/resources/META-INF/resources/frontend/js/script.js
@JavaScript("js/script.js")[3]/src/main/resources/META-INF/resources/frontend/js/script.js
-
new Image("img/flower.jpg", "A flower") -
/src/main/resources/META-INF/resources/img/flower.jpg
new Image("img/flower.jpg", "A flower")/src/main/resources/META-INF/resources/img/flower.jpg
[1]
@JsModule和@CssImport批注也可以用于从npm包中导入.在这种情况下，路径定义为@JsModule("@polymer/paper-input")或@CssImport("some-package/style.css"). 引用本地前端目录的路径应以./[1] The
@JsModuleand@CssImportannotations can also be used for importing from an npm package. In this case, the path is defined as@JsModule("@polymer/paper-input")or@CssImport("some-package/style.css"). Paths referring to the local frontend directory should be prefixed with./[2]
@StyleSheet注释也可以在带有npm的Vaadin 14中使用.可以使用与V10-V13中相同的路径，包括context://协议@StyleSheet("context://style.css")，该协议可以解析相对于Web应用程序上下文路径的路径，就像其他静态文件一样. 以这种方式包含的样式可能会导致Web组件出现问题.[2] The
@StyleSheetannotation can also be used in Vaadin 14 with npm. The same paths as in V10-V13 can be used, including thecontext://protocol@StyleSheet("context://style.css"), which resolves the path relative to the context path of the web application, like other static files. Styles included this way may cause issues with web components.[3]
@JavaScript注释也可以在带有npm的Vaadin 14中使用. 然后应使用V14/frontend文件夹.[3] The
@JavaScriptannotation can also be used in Vaadin 14 with npm. The V14/frontendfolder should then be used,.这篇关于Vaadin 10+静态文件应该放在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
-
-
-
-
-
