如果你的静态资源文件需要 （Vite 或 webpack） 做构建编译处理，可以放到 assets 目录，否则可以放到 public 目录中去。

public

public 目录直接在服务器根目录下提供静态资源， 在 nuxt 2 中叫做 static。

public 目录中的静态资源是公开可用的。可以直接通过 https://[网址].com/images/logo.png 的方式访问 public 目录中的文件、图片等

在应用程序的代码中，使用 public 目录下的文件：

  1. <template>
  2.   <img src="/images/logo.png" alt="XXY" />
  3. </template>

assets

需要构建工具（Vite 或 webpack）处理的静态资源，如 css 样式、字体、不会从 public 提供的图形等。

图片

在应用程序的代码中，通过使用 ~/assets/ 或者 @/assets/ 路径来读取位于assets目录下的文件。

  1. <template>
  2.   <img src="~/assets/images/contact/address.png" alt="公司地址" />
  3. </template>

全局样式导入

新建 src/assets/styles 目录，新建 src/assets/styles/global.css 全局样式文件

  1. *,
  2. *::before,
  3. *::after {
  4.   box-sizing: border-box;
  5.   margin: 0;
  6.   padding: 0;
  7. }
  9. html,
  10. body {
  11.   font-size: 16px;
  12.   line-height: 1.5;
  13.   -webkit-font-smoothing: antialiased;
  14.   -moz-osx-font-smoothing: grayscale;
  15.   font-family: "Source Han Sans CN", "Source Han Sans CN-Regular", sans-serif;
  16. }
  18. ul,
  19. li {
  20.   list-style: none;
  21. }
  23. a {
  24.   text-decoration: none;
  25. }
  27. .global-content {
  28.   max-width: 79rem;
  29.   margin: auto;
  30.   box-sizing: border-box;
  31.   padding: 0 2rem;
  32. }
  34. /* 单行文本换行 */
  35. .global-ellipsis-oneline {
  36.   overflow: hidden;
  37.   text-overflow: ellipsis;
  38.   white-space: nowrap;
  39. }

新建 src/assets/styles/normalize.css 重设浏览器默认样式文件

  1. /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  3. /* Document
  4.    ========================================================================== */
  6. /**
  7.  * 1. Correct the line height in all browsers.
  8.  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9.  */
  11. html {
  12.   line-height: 1.15; /* 1 */
  13.   -webkit-text-size-adjust: 100%; /* 2 */
  14. }
  16. /* Sections
  17.    ========================================================================== */
  19. /**
  20.  * Remove the margin in all browsers.
  21.  */
  23. body {
  24.   margin: 0;
  25. }
  27. /**
  28.  * Render the `main` element consistently in IE.
  29.  */
  31. main {
  32.   display: block;
  33. }
  35. /**
  36.  * Correct the font size and margin on `h1` elements within `section` and
  37.  * `article` contexts in Chrome, Firefox, and Safari.
  38.  */
  40. h1 {
  41.   font-size: 2em;
  42.   margin: 0.67em 0;
  43. }
  45. /* Grouping content
  46.    ========================================================================== */
  48. /**
  49.  * 1. Add the correct box sizing in Firefox.
  50.  * 2. Show the overflow in Edge and IE.
  51.  */
  53. hr {
  54.   box-sizing: content-box; /* 1 */
  55.   height: 0; /* 1 */
  56.   overflow: visible; /* 2 */
  57. }
  59. /**
  60.  * 1. Correct the inheritance and scaling of font size in all browsers.
  61.  * 2. Correct the odd `em` font sizing in all browsers.
  62.  */
  64. pre {
  65.   font-family: monospace; /* 1 */
  66.   font-size: 1em; /* 2 */
  67. }
  69. /* Text-level semantics
  70.    ========================================================================== */
  72. /**
  73.  * Remove the gray background on active links in IE 10.
  74.  */
  76. a {
  77.   background-color: transparent;
  78. }
  80. /**
  81.  * 1. Remove the bottom border in Chrome 57-
  82.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  83.  */
  85. abbr[title] {
  86.   border-bottom: none; /* 1 */
  87.   text-decoration: underline; /* 2 */
  88.   text-decoration: underline dotted; /* 2 */
  89. }
  91. /**
  92.  * Add the correct font weight in Chrome, Edge, and Safari.
  93.  */
  95. b,
  96. strong {
  97.   font-weight: bolder;
  98. }
  100. /**
  101.  * 1. Correct the inheritance and scaling of font size in all browsers.
  102.  * 2. Correct the odd `em` font sizing in all browsers.
  103.  */
  105. code,
  106. kbd,
  107. samp {
  108.   font-family: monospace; /* 1 */
  109.   font-size: 1em; /* 2 */
  110. }
  112. /**
  113.  * Add the correct font size in all browsers.
  114.  */
  116. small {
  117.   font-size: 80%;
  118. }
  120. /**
  121.  * Prevent `sub` and `sup` elements from affecting the line height in
  122.  * all browsers.
  123.  */
  125. sub,
  126. sup {
  127.   font-size: 75%;
  128.   line-height: 0;
  129.   position: relative;
  130.   vertical-align: baseline;
  131. }
  133. sub {
  134.   bottom: -0.25em;
  135. }
  137. sup {
  138.   top: -0.5em;
  139. }
  141. /* Embedded content
  142.    ========================================================================== */
  144. /**
  145.  * Remove the border on images inside links in IE 10.
  146.  */
  148. img {
  149.   border-style: none;
  150. }
  152. /* Forms
  153.    ========================================================================== */
  155. /**
  156.  * 1. Change the font styles in all browsers.
  157.  * 2. Remove the margin in Firefox and Safari.
  158.  */
  160. button,
  161. input,
  162. optgroup,
  163. select,
  164. textarea {
  165.   font-family: inherit; /* 1 */
  166.   font-size: 100%; /* 1 */
  167.   line-height: 1.15; /* 1 */
  168.   margin: 0; /* 2 */
  169. }
  171. /**
  172.  * Show the overflow in IE.
  173.  * 1. Show the overflow in Edge.
  174.  */
  176. button,
  177. input {
  178.   /* 1 */
  179.   overflow: visible;
  180. }
  182. /**
  183.  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  184.  * 1. Remove the inheritance of text transform in Firefox.
  185.  */
  187. button,
  188. select {
  189.   /* 1 */
  190.   text-transform: none;
  191. }
  193. /**
  194.  * Correct the inability to style clickable types in iOS and Safari.
  195.  */
  197. button,
  198. [type="button"],
  199. [type="reset"],
  200. [type="submit"] {
  201.   -webkit-appearance: button;
  202. }
  204. /**
  205.  * Remove the inner border and padding in Firefox.
  206.  */
  208. button::-moz-focus-inner,
  209. [type="button"]::-moz-focus-inner,
  210. [type="reset"]::-moz-focus-inner,
  211. [type="submit"]::-moz-focus-inner {
  212.   border-style: none;
  213.   padding: 0;
  214. }
  216. /**
  217.  * Restore the focus styles unset by the previous rule.
  218.  */
  220. button:-moz-focusring,
  221. [type="button"]:-moz-focusring,
  222. [type="reset"]:-moz-focusring,
  223. [type="submit"]:-moz-focusring {
  224.   outline: 1px dotted ButtonText;
  225. }
  227. /**
  228.  * Correct the padding in Firefox.
  229.  */
  231. fieldset {
  232.   padding: 0.35em 0.75em 0.625em;
  233. }
  235. /**
  236.  * 1. Correct the text wrapping in Edge and IE.
  237.  * 2. Correct the color inheritance from `fieldset` elements in IE.
  238.  * 3. Remove the padding so developers are not caught out when they zero out
  239.  *    `fieldset` elements in all browsers.
  240.  */
  242. legend {
  243.   box-sizing: border-box; /* 1 */
  244.   color: inherit; /* 2 */
  245.   display: table; /* 1 */
  246.   max-width: 100%; /* 1 */
  247.   padding: 0; /* 3 */
  248.   white-space: normal; /* 1 */
  249. }
  251. /**
  252.  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  253.  */
  255. progress {
  256.   vertical-align: baseline;
  257. }
  259. /**
  260.  * Remove the default vertical scrollbar in IE 10+.
  261.  */
  263. textarea {
  264.   overflow: auto;
  265. }
  267. /**
  268.  * 1. Add the correct box sizing in IE 10.
  269.  * 2. Remove the padding in IE 10.
  270.  */
  272. [type="checkbox"],
  273. [type="radio"] {
  274.   box-sizing: border-box; /* 1 */
  275.   padding: 0; /* 2 */
  276. }
  278. /**
  279.  * Correct the cursor style of increment and decrement buttons in Chrome.
  280.  */
  282. [type="number"]::-webkit-inner-spin-button,
  283. [type="number"]::-webkit-outer-spin-button {
  284.   height: auto;
  285. }
  287. /**
  288.  * 1. Correct the odd appearance in Chrome and Safari.
  289.  * 2. Correct the outline style in Safari.
  290.  */
  292. [type="search"] {
  293.   -webkit-appearance: textfield; /* 1 */
  294.   outline-offset: -2px; /* 2 */
  295. }
  297. /**
  298.  * Remove the inner padding in Chrome and Safari on macOS.
  299.  */
  301. [type="search"]::-webkit-search-decoration {
  302.   -webkit-appearance: none;
  303. }
  305. /**
  306.  * 1. Correct the inability to style clickable types in iOS and Safari.
  307.  * 2. Change font properties to `inherit` in Safari.
  308.  */
  310. ::-webkit-file-upload-button {
  311.   -webkit-appearance: button; /* 1 */
  312.   font: inherit; /* 2 */
  313. }
  315. /* Interactive
  316.    ========================================================================== */
  318. /*
  319.  * Add the correct display in Edge, IE 10+, and Firefox.
  320.  */
  322. details {
  323.   display: block;
  324. }
  326. /*
  327.  * Add the correct display in all browsers.
  328.  */
  330. summary {
  331.   display: list-item;
  332. }
  334. /* Misc
  335.    ========================================================================== */
  337. /**
  338.  * Add the correct display in IE 10+.
  339.  */
  341. template {
  342.   display: none;
  343. }
  345. /**
  346.  * Add the correct display in IE 10.
  347.  */
  349. [hidden] {
  350.   display: none;
  351. }

nuxt.config.ts 配置 全局 css
image.png

css 预处理器 less

  1. pnpm install less --save-dev

将上面的 global.css 改为 global.less

  1. *,
  2. *::before,
  3. *::after {
  4.   box-sizing: border-box;
  5.   margin: 0;
  6.   padding: 0;
  7. }
  9. html,
  10. body {
  11.   font-size: 16px;
  12.   line-height: 1.5;
  13.   -webkit-font-smoothing: antialiased;
  14.   -moz-osx-font-smoothing: grayscale;
  15.   font-family: "Source Han Sans CN", "Source Han Sans CN-Regular", sans-serif;
  16. }
  18. ul,
  19. li {
  20.   list-style: none;
  21. }
  23. a {
  24.   text-decoration: none;
  25. }
  27. .global-content {
  28.   max-width: 75rem;
  29.   margin: auto;
  30.   padding: 0;
  31. }
  33. /* 单行文本换行 */
  34. .global-ellipsis-oneline {
  35.   overflow: hidden;
  36.   text-overflow: ellipsis;
  37.   white-space: nowrap;
  38. }

在 nuxt.config.ts 中修改 less 的配置

  1.   css: [
  2.     '@/assets/styles/global.less',
  3.   ],

:::info 注意，如果在 global.less 中声明了 less 变量，在页面中使用变量时会报错变量未声明，全局 less 变量需要单独配置 :::

添加全局 less 变量文件

  1. @primary-color: #1890ff;
  1.  vite: {
  2.     css: {
  3.       preprocessorOptions: {
  4.         less: {
  5.           additionalData: '@import "assets/styles/variable.less";',
  6.         },
  7.       },
  8.     },
  9.   },